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.

If you like the project

If you think I have helped you, feel free to get me coffee. 😊