React-native-calenderpicker NPM

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

Logo

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.