Awesome Open Source
Awesome Open Source

react-native-daterange-picker

A React Native component for picking date ranges or single dates.

  • Completely customizable
  • Uses Moment.js for handling dates

Installation

yarn add react-native-daterange-picker

or

npm install --save react-native-daterange-picker

Usage

Date range

import React from "react";
import { StyleSheet, View, Text } from "react-native";
import moment from "moment";
import DateRangePicker from "react-native-daterange-picker";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: null,
      endDate: null,
      displayedDate: moment(),
    };
  }

  setDates = (dates) => {
    this.setState({
      ...dates,
    });
  };

  render() {
    const { startDate, endDate, displayedDate } = this.state;
    return (
      <View style={styles.container}>
        <DateRangePicker
          onChange={this.setDates}
          endDate={endDate}
          startDate={startDate}
          displayedDate={displayedDate}
          range
        >
          <Text>Click me!</Text>
        </DateRangePicker>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Single date

Use the date prop instead of the startDate and endDate props.

import React from "react";
import { StyleSheet, View, Text } from "react-native";
import moment from "moment";
import DateRangePicker from "react-native-daterange-picker";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: null,
      displayedDate: moment(),
    };
  }

  setDates = (dates) => {
    this.setState({
      ...dates,
    });
  };

  render() {
    const { date, displayedDate } = this.state;
    return (
      <View style={styles.container}>
        <DateRangePicker
          onChange={this.setDates}
          date={date}
          displayedDate={displayedDate}
        >
          <Text>Click me!</Text>
        </DateRangePicker>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Minimum and maximum allowed dates

Use the minDate and maxDate props to disable the dates that aren't allowed.

import React from "react";
import { StyleSheet, View, Text } from "react-native";
import moment from "moment";
import DateRangePicker from "react-native-daterange-picker";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: null,
      endDate: null,
      displayedDate: moment(),
      minDate: moment().set("date", 17),
      maxDate: moment().set("date", 20),
    };
  }

  setDates = (dates) => {
    this.setState({
      ...dates,
    });
  };

  render() {
    const { startDate, endDate, displayedDate, minDate, maxDate } = this.state;
    return (
      <View style={styles.container}>
        <DateRangePicker
          onChange={this.setDates}
          startDate={startDate}
          endDate={endDate}
          minDate={minDate}
          maxDate={maxDate}
          range
          displayedDate={displayedDate}
        >
          <Text>Click me!</Text>
        </DateRangePicker>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Setting locale

Simply pass your custom Moment object with locale attached to it as a prop.

import React from "react";
import { StyleSheet, View, Text } from "react-native";
import DateRangePicker from "react-native-daterange-picker";

import moment from "moment/min/moment-with-locales";
moment.locale("en");

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: null,
      endDate: null,
      displayedDate: moment(),
    };
  }

  setDates = (dates) => {
    this.setState({
      ...dates,
    });
  };

  render() {
    const { startDate, endDate, displayedDate } = this.state;
    return (
      <View style={styles.container}>
        <DateRangePicker
          onChange={this.setDates}
          endDate={endDate}
          startDate={startDate}
          displayedDate={displayedDate}
          range
          moment={moment}
        >
          <Text>Click me!</Text>
        </DateRangePicker>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Options

Property type required? defaultValue Description
open boolean no Prop to control calendar visibility state. Passing this prop will disable the default function for toggling visibility off/on by clicking the backdrop/click me button.
onChange function yes Date change callback function.
startDate Moment yes (if range) Value of the picked start date.
endDate Moment yes (if range) Value of the picked end date.
date Moment yes (if no range) Value of the picked single date.
displayedDate Moment yes The date (year/month) which is being displayed on the picker.
minDate Moment no The minimum allowed date for the picker.
maxDate Moment no The maximum allowed date for the picker.
range boolean no false Allows you to pick between range and single date selection.
presetButtons boolean no false Enables preset buttons (Today / This Week / This Month)
dayHeaders boolean no true Allows you to enable/disable day headers.
backdropStyle Object no Styling for the backdrop of the picker.
containerStyle Object no Styling for the picker container.
headerStyle Object no Styling for header area.
headerTextStyle Object no Styling for header text.
dayStyle Object no Styling for a single day element.
dayTextStyle Object no Styling for the text of a single day element.
selectedStyle Object no Styling for selected day element(s).
selectedTextStyle Object no Styling for the text of selected day element(s).
dayHeaderStyle Object no Styling for selected day header element(s).
dayHeaderTextStyle Object no Styling for the text of day header element(s).
disabledStyle Object no Styling for disabled day element(s).
buttonStyle Object no Styling for the preset button(s).
buttonTextStyle Object no Styling for the text of preset button(s).
buttonContainerStyle Object no Styling for the preset button container.
monthPrevButton Node no Icon for previous button.
monthNextButton Node no Icon for next button.
monthButtonsStyle Object no Styling for month prev/next buttons.
moment Moment no Custom Moment object, useful for setting custom locale.

Questions & Suggestions

Feel free to contact me at [email protected] for your questions and suggestions.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,555,917
React Native (11,833
Calendar (1,943
Datepicker (615
Range (424
Moment (253
Related Projects