rn-select-date-range
TypeScript icon, indicating that this package has built-in type declarations

5.0.0 • Public • Published

rn-select-date-range

A simple React Native date range picker component




Installing

npm install rn-select-date-range

or

yarn add rn-select-date-range



Screenshot




Prerequisites

CalendarPicker requires Moment JS.

npm install --save moment



Example React Native App

import moment from "moment";
import React, { useState } from "react";
import { SafeAreaView, StyleSheet, View, Text } from "react-native";
import DateRangePicker from "rn-select-date-range";

const App = () => {
  const [selectedRange, setRange] = useState({});
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <DateRangePicker
          onSelectDateRange={(range) => {
            setRange(range);
          }}
          blockSingleDateSelection={true}
          responseFormat="YYYY-MM-DD"
          maxDate={moment()}
          minDate={moment().subtract(100, "days")}
          selectedDateContainerStyle={styles.selectedDateContainerStyle}
          selectedDateStyle={styles.selectedDateStyle}
        />
        <View style={styles.container}>
          <Text>first date: {selectedRange.firstDate}</Text>
          <Text>second date: {selectedRange.secondDate}</Text>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    margin: 50,
  },
  selectedDateContainerStyle: {
    height: 35,
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "blue",
  },
  selectedDateStyle: {
    fontWeight: "bold",
    color: "white",
  },
});

export default App;



CalendarPicker Props

Prop Type Required Description
onSelectDateRange Method Required This will return a object with firstDate and lastDate
maxDate Moment Date Optional If you need to pass Max Date user can select, set this prop as a moment date
minDate Moment Date Optional If you need to pass Min Date user can select, set this prop as a moment date
responseFormat String Optional Please refere the date formats here Moment Date Formats
blockSingleDateSelection boolean Optional This will block the user to click single date without date range
font String Optional Name of the font you are using in your theme
selectedDateContainerStyle Style Optional Style of the selected date container
selectedDateStyle Style Optional Style of the selected date
ln string Optional Two letter locales string that is supported by the Moment library
onConfirm Method Optional This function will be executed if confirm button pressed
onClear Method Optional This function will be executed if clear button pressed
clearBtnTitle string Optional Text for the button to clear data. If empty string passed, button will not be shown
confirmBtnTitle string Optional Text for the button to confirm selection of dates. If empty string passed, button will not be shown



onSelectDateRange response

{
    firstDate: if you pass responseFormat it will be a formatted date, if not it will be a moment date
    lastDate: if you pass responseFormat it will be a formatted date, if not it will be a moment date
}



Run the sample app

cd example
npm install
npx react-native run-ios



Suggestions?

Open Issues. Submit PRs.

Package Sidebar

Install

npm i rn-select-date-range

Weekly Downloads

621

Version

5.0.0

License

MIT

Unpacked Size

41.4 kB

Total Files

23

Last publish

Collaborators

  • dilipchandima