1.0.5 • Published 2 years ago

@chuhoanglong/rn-daterange-picker v1.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

@chuhoanglong/rn-daterange-picker

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

  • Completely customizable
  • Uses Moment.js for handling dates

Installation

yarn add @chuhoanglong/rn-daterange-picker

or

npm install --save @chuhoanglong/rn-daterange-picker

Usage

Date range

import React from "react";
import { StyleSheet, View, Text } from "react-native";
import moment from "moment";
import DateRangePicker from "@chuhoanglong/rn-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 "@chuhoanglong/rn-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 "@chuhoanglong/rn-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 "@chuhoanglong/rn-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
openbooleannoProp 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.
onChangefunctionyesDate change callback function. startDate endDate displayedDate selecting
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.
iconBinObject, StringnoIcon for button remove.

Questions & Suggestions

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

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago