Pick Date In Week/Month View – Week Month Date Picker

A React Native date picker component that allows you to pick a date in a week or month view.

How to use it:

1. Install and import necessary components.

# NPM
$ npm i react-native-week-month-date-picker

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

2. Create a date picker in your 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"
        translations={{
          todayButtonText: 'Today';
        }}
        theme={{
          primaryColor: 'purple',
        }}
      >
        <View>
          <Text>Timeslots</Text>
          <Text>{selectedDate.toString()}</Text>
        </View>
      </DatePicker>
    </SafeAreaView>
  );
}

Preview:

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