react-native-daterange-picker

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 [e-mail] for your questions and suggestions.