Week Month Date Picker for React Native

Date picker with a week and month view

Installation

npm install react-native-week-month-date-picker

Dependencies

This library needs these dependencies to be installed as peer dependencies in your project:

npm install react-native-reanimated react-native-gesture-handler react-native-safe-area-context date-fns

Usage

import { addDays } from 'date-fns';
import * as React from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { DatePicker } from 'react-native-week-month-date-picker';

export default function App() {
  const minDate = new Date();
  const [selectedDate, setSelectedDate] = React.useState(new Date());

  return (
    <SafeAreaView style={{ flex: 1}}>
      <DatePicker
        minDate={minDate}
        maxDate={addDays(minDate, 120)}
        markedDates={[minDate, addDays(new Date(), 2)]}
        selectedDate={selectedDate}
        onDateChange={(date) => setSelectedDate(date)}
        disabledDates={[addDays(new Date(), 1), addDays(new Date(), 3)]}
        allowsPastDates={false}
        locale="en"
        theme={{
          primaryColor: 'purple',
        }}
      >
        <View>
          <Text>Timeslots</Text>
          <Text>{selectedDate.toString()}</Text>
        </View>
      </DatePicker>
    </SafeAreaView>
  );
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Download Details:

Author: gunnartorfis

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/gunnartorfis/react-native-week-month-date-picker

License: MIT

#react-native #react