react-native-calenderpicker

CalendarPicker

A flexible and customizable React Native calendar picker component that supports both iOS and Android. This component allows single-date selection and date-range selection modes and is compatible with date-fns and moment libraries for seamless date manipulation.

Prerequisites

This project requires NodeJS (version 8 or later) and NPM.
Node and NPM are really easy to install.
To make sure you have them available on your machine, try running the following command.

Using npm:

$ npm install date-fns moment react-native-calendarpicker

Using Yarn:

$ yarn add date-fns moment react-native-calendarpicker

Example

Usage

Basic Example:

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import CalendarPicker from 'react-native-calendarpicker';

const App = () => {
  const [selectedDates, setSelectedDates] = useState({});

  const handleDateChange = (dates) => {
    setSelectedDates(dates);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Select a Date or Date Range</Text>
      <CalendarPicker
        mode="range" // or "single"
        StartDate={null}
        EndDate={null}
        onChange={handleDateChange}
        height={40} // Adjust day cell vertical margin
      />
      <Text style={styles.output}>
        Selected Start Date: {selectedDates?.startDate?.format('DD/MM/YYYY') || 'N/A'}
      </Text>
      <Text style={styles.output}>
        Selected End Date: {selectedDates?.endDate?.format('DD/MM/YYYY') || 'N/A'}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  output: {
    marginTop: 8,
    fontSize: 16,
  },
});

export default App;

Prop	Type	Default	Description
onChange	function	null	Callback function invoked when a date or range is selected.
mode	string	"single"	Mode of selection. Options: "single" or "range".
StartDate	string	null	The initial start date in YYYY-MM-DD format.
EndDate	string	null	The initial end date (for range mode) in YYYY-MM-DD format.
preview	boolean	false	Enables a preview mode for displaying the selected dates.
height	number	15	Adjusts the vertical margin of day cells.

Additional Information

Dependencies:

This component requires date-fns and moment for date handling. Make sure to install them using the commands provided above.

Customization:

You can modify styles such as startDate, endDate, and inRange in the StyleSheet object to customize the UI.

Future Dates:

Future dates are automatically disabled and styled with a gray text color.

Navigation:

Month navigation buttons (next and previous) are included.

Contributions

Feel free to submit issues, feature requests, or pull requests. Feedback and contributions are always welcome to improve the library!

License

This project is licensed under the MIT License.

Enjoy using the CalendarPicker component for all your React Native calendar needs! 😊