Animated Week Month Date Picker For React Native

Description:

A React Native component to help developers create an animated date picker with week and month views.

How to use it:

1. Install the date picker component and dependencies as follows:

# NPM
$ npm i vue-modality-v3
# Dependencies
$ npm i react-native-reanimated react-native-gesture-handler react-native-safe-area-context date-fns

2. Import the component.

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';

3. Create a date picker component in the app.

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>
  );
}

4. Available date picker component.

selectedDate: Date;
onDateChange: (date: Date) => void;
minDate?: Date;
maxDate?: Date;
markedDates?: Date[];
disabledDates?: Date[];
allowsPastDates?: boolean;
theme?: {
  primaryColor?: string;
};
translations?: {
  todayButtonText?: string;
};
locale?: string;