Home

Awesome

React Native Calendar Datepicker

Description

This project aims at providing developers with a cross-platform, highly customizable, calendar date picker component for React Native.

Here is a quick example of how it works, with custom appearance:

alt text

Installation

npm install --save react-native-calendar-datepicker

Minimum react-native: "^0.33.0"

Basic Usage

Getting started with this component is very very easy. However, the initial appearance is minimalistic, but the library offers the developer the ability to easily customize it.

In its most basic form, the usage of this component looks like this:

import Calendar from 'react-native-calendar-datepicker';
import Moment from 'moment';

...

  <Calendar
    onChange={(date) => this.setState({date})}
    selected={this.state.date}
    // We use Moment.js to give the minimum and maximum dates.
    minDate={Moment().startOf('day')}
    maxDate={Moment().add(10, 'years').startOf('day')}
    />

API Reference

Note: Each date provided will be a Moment.js object.

Basic properties

PropertyTypeExplanation
selectedMomentThe currently selected date
onChange(date: Moment) => voidCallback for selecting a date
minDateMoment[Mandatory] Minimum selectable date
maxDateMoment[Mandatory] Maximum selectable date
startStage"day"/"month"/"year"[Default: "day"] Whether you would like to select the day, month or year first.
finalStage"day"/"month"/"year"[Default: "day"] The last level of selection you want.
slideThresholdnumber[Default: min([width / 3, 250])] The number of pixels after which the slide event will be triggered.
showArrowsboolean[Default: false] Whether you would like to show arrow buttons for moving between months.

Locale specific calendar

In order to change the locale of the calendar, just change the locale of Moment.js. Please make sure to do so before using the calendar component.

Styling properties

In its initial form the component has a minimalistic appearance, shown in the picture below, but it can easily be customized.

<img src="https://github.com/vlad-doru/react-native-calendar-datepicker/blob/master/barebones.png?raw=true" width="200"/>

Styled example with arrows:

<img src="https://github.com/jasongaare/react-native-calendar-datepicker/blob/SelectionArrows/styled-with-arrows.png?raw=true" width="200"/>

Below is the list of properties that can be used for styling. For a concrete example, check out the demo app link

PropertyTypeExplanation
styleView.propTypes.styleView wrapper of the calendar
barViewView.propTypes.styleStyling the view wrapper for the bar at the top of the component
barTextText.propTypes.styleStyling the text in the top bar
stageViewView.propTypes.styleStyling the view wrapper of the current stage
dayHeaderViewView.propTypes.styleStyling the view wrapper of day names
dayHeaderTextText.propTypes.styleStyling the text of day names
dayRowViewView.propTypes.styleStyling each row view of days
dayViewView.propTypes.styleView wrapper of each day
dayTextText.propTypes.styleStyling the text of each day number
dayTodayTextText.propTypes.styleHighlighting today in the calendar
daySelectedTextText.propTypes.styleHighlighting the selected day in the calendar
dayDisabledTextText.propTypes.styleStyling unavailable dates in the calendar
monthTextText.propTypes.styleStyling the text for each month in the month selector
monthDisabledTextText.propTypes.styleStyling unavailable months
monthSelectedTextText.propTypes.styleStyling selected month
yearMinTintColorstringStyling left side of year slider
yearMaxTintColorstringStyling right side of year slider
yearSliderSlider.propTypes.styleStyling the year slider
yearTextText.propTypes.styleStyling the year text

TODO

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Credits

Main Developer: Vlad-Doru Ion

Pull requests by:

License

Apache License 2.0