react-native-easy-date-picker

React Native Date Picker

This package will help to pick a single date and multiple dates in react native.

Attachments

Required Package

npm install @react-native-picker/picker --save

yarn add @react-native-picker/picker

Check the link here

Installation

yarn add react-native-easy-date-picker

or

npm install react-native-easy-date-picker --save

Example

Code

import React, { useRef } from 'react';
import {
  SafeAreaView,
  View,
  Text
} from 'react-native';
import CalendarDatePicker from 'react-native-easy-date-picker';


const ExampleOne = () => {
  const calendarDatePicker = useRef();

  const getSelectedDates = (selectedDates) => {
    console.log('hello', selectedDates)
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>

      <View
        style={{ flex: 1, alignItems: "center", justifyContent: 'center' }}>
        <Text onPress={() => {
          calendarDatePicker.current.handleShow()
        }}>{'Show Picker'}</Text>

        <CalendarDatePicker
          ref={calendarDatePicker}
          getSelectedDates={getSelectedDates}
          multiSelect={true}
          maxNumOfDateSel={6}
          checkbefToday={true}
        />



      </View>

    </SafeAreaView>
  );
};



export default ExampleOne;

Check the code here

Props

Prop	Default	Type	Description
ref		reference	used for show hide picker
multiSelect	false	boolean	number of item per row
checkbefToday	false	boolean	style of grid item view
maxNumOfDateSel	-1	number	style of entire listview

Instance Methods

Method	Params	Description
getSelectedDates	array	return selected dates

Author

Loganathan Rajamani