Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-native-daterange-picker with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-native/package.json"); // react-native is a peer dependency. var reactNativeDaterangePicker = require("react-native-daterange-picker")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-daterange-picker v1.4.0

Date range and single date picker for React Native (Supports iOS and Android)

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

Propertytyperequired?defaultValueDescription
onChangefunctionyesDate change callback function.
startDateMomentyes (if range)Value of the picked start date.
endDateMomentyes (if range)Value of the picked end date.
dateMomentyes (if no range)Value of the picked single date.
displayedDateMomentyesThe date (year/month) which is being displayed on the picker.
minDateMomentnoThe minimum allowed date for the picker.
maxDateMomentnoThe maximum allowed date for the picker.
rangebooleannofalseAllows you to pick between range and single date selection.
presetButtonsbooleannofalseEnables preset buttons (Today / This Week / This Month)
dayHeadersbooleannotrueAllows you to enable/disable day headers.
backdropStyleObjectnoStyling for the backdrop of the picker.
containerStyleObjectnoStyling for the picker container.
headerStyleObjectnoStyling for header area.
headerTextStyleObjectnoStyling for header text.
dayStyleObjectnoStyling for a single day element.
dayTextStyleObjectnoStyling for the text of a single day element.
selectedStyleObjectnoStyling for selected day element(s).
selectedTextStyleObjectnoStyling for the text of selected day element(s).
dayHeaderStyleObjectnoStyling for selected day header element(s).
dayHeaderTextStyleObjectnoStyling for the text of day header element(s).
disabledStyleObjectnoStyling for disabled day element(s).
buttonStyleObjectnoStyling for the preset button(s).
buttonTextStyleObjectnoStyling for the text of preset button(s).
buttonContainerStyleObjectnoStyling for the preset button container.
monthPrevButtonNodenoIcon for previous button.
monthNextButtonNodenoIcon for next button.
monthButtonsStyleObjectnoStyling for month prev/next buttons.
momentMomentnoCustom Moment object, useful for setting custom locale.

Questions & Suggestions

Feel free to contact me at deniz@deniz.gg for your questions and suggestions.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free