Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

React Native Calendar Datepicker


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


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';


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

API Reference

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

Basic properties

Property Type Explanation
selected Moment The currently selected date
onChange (date: Moment) => void Callback for selecting a date
minDate Moment [Mandatory] Minimum selectable date
maxDate Moment [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.
slideThreshold number [Default: min([width / 3, 250])] The number of pixels after which the slide event will be triggered.
showArrows boolean [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.

Styled example with arrows:

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

Property Type Explanation
style View wrapper of the calendar
barView Styling the view wrapper for the bar at the top of the component
barText Styling the text in the top bar
stageView Styling the view wrapper of the current stage
dayHeaderView Styling the view wrapper of day names
dayHeaderText Styling the text of day names
dayRowView Styling each row view of days
dayView View wrapper of each day
dayText Styling the text of each day number
dayTodayText Highlighting today in the calendar
daySelectedText Highlighting the selected day in the calendar
dayDisabledText Styling unavailable dates in the calendar
monthText Styling the text for each month in the month selector
monthDisabledText Styling unavailable months
monthSelectedText Styling selected month
yearMinTintColor string Styling left side of year slider
yearMaxTintColor string Styling right side of year slider
yearSlider Styling the year slider
yearText Styling the year text


  • Add unit tests
  • Add integration test
  • Set up continous integration
  • Hook to


  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


Main Developer: Vlad-Doru Ion

Pull requests by:


Apache License 2.0


React-Native cross-platform, calendar component.








No releases published


No packages published