rsd
rn-select-date-range
npm i rn-select-date-range
rsd

rn-select-date-range

A simple and fully customizable React Native date range picker component

by Dileepa Chandima

3.2.2 (see all)License:MITTypeScript:Built-In
npm i rn-select-date-range
Readme

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

PropTypeRequiredDescription
onSelectDateRangeMethodRequiredThis will return a object with firstDate and lastDate
maxDateMoment DateOptionalIf you need to pass Max Date user can select, set this prop as a moment date
minDateMoment DateOptionalIf you need to pass Min Date user can select, set this prop as a moment date
responseFormatStringOptionalPlease refere the date formats here Moment Date Formats
blockSingleDateSelectionbooleanOptionalThis will block the user to click single date without date range
fontStringOptionalName of the font you are using in your theme
selectedDateContainerStyleStyleOptionalStyle of the selected date container
selectedDateStyleStyleOptionalStyle of the selected date
lnstringOptionalTwo letter locales string that is supported by the Moment library



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.

Downloads/wk

235

GitHub Stars

0
No data available

LAST COMMIT

NaNyrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

0

OPEN PRs

0
No data available
VersionTagPublished
3.2.2
latest
3mos ago
No alternatives found
No tutorials found
Add a tutorial