R

e

a

c

t

N

a

t

i

v

e

M

o

d

e

r

n

D

a

t

e

p

i

c

k

e

r

A customizable calendar, time & month picker for React Native (including Persian Jalaali calendar & locale)
View on Github

Installation

Install it using Yarn or NPM:

yarn add react-native-modern-datepicker
//or if you prefer npm
npm install react-native-modern-datepicker --save

Try it out!

You can run example module by performing these steps:

$ git clone git@github.com:HosseinShabani/react-native-modern-datepicker.git
$ cd playground && yarn
$ react-native run-ios //or run-android

Getting started

Welcome to react-native-modern-datepicker!

  1. 1- The package is both Android and iOS compatible.

  2. 2- This package uses React hooks. Make sure you're running react-native >= 0.59.0 version.

  3. 3- By default, this package inherits font-family from your project ('System'). You can use your own custom font, See options prop.

  4. 4- You might see performance issues in development mode. However, you won't see such thing in production build.

Basic usage

Here's the most basic way to use our "Modern" date picker.

import React, { useState } from 'react';
import DatePicker from 'react-native-modern-datepicker';

const BasicUsage = () => {
  const [selectedDate, setSelectedDate] = useState('');

  return (
    <DatePicker
      onSelectedChange={date => setSelectedDate(date)}
    />
  );
};

Jalaali

You also need Jalaali datepicker? Here it is.

import React from 'react';
import DatePicker, { getFormatedDate } from 'react-native-modern-datepicker';

const JalaaliExample = () => {
  return (
    <DatePicker
      isGregorian={false}
      options={{
        defaultFont: 'Shabnam-Light',
        headerFont: 'Shabnam-Medium',
      }}
      selected={getFormatedDate(new Date(), 'jYYYY/jMM/jDD')}
    />
  );
};

Customizable

Got your own design system? You can easily apply it.

import React from 'react';
import DatePicker from 'react-native-modern-datepicker';

const FullUsageExample = () => {
  return (
    <DatePicker
      options={{
        backgroundColor: '#090C08',
        textHeaderColor: '#FFA25B',
        textDefaultColor: '#F6E7C1',
        selectedTextColor: '#fff',
        mainColor: '#F4722B',
        textSecondaryColor: '#D6C7A1',
        borderColor: 'rgba(122, 146, 165, 0.1)',
      }}
      current="2020-07-13"
      selected="2020-07-23"
      mode="calendar"
      minuteInterval={30}
      style={{ borderRadius: 10 }}
    />
  );
};
Customizable

Minimum & Maximum

You gotta specify a range? Do it.

import React from 'react';
import DatePicker from 'react-native-modern-datepicker';

const MinMaxExample = () => {
  return (
    <DatePicker
      current="2020-07-13"
      minimumDate="2020-02-17"
      maximumDate="2020-07-25"
    />
  );
};

Time Picker

You're only looking for a time picker? It's all taken care of.

import React, { useState } from 'react';
import DatePicker from 'react-native-modern-datepicker';

const TimePickerExample = () => {
  const [time, setTime] = useState('');

  return (
    <DatePicker
      mode="time"
      minuteInterval={3}
      onTimeChange={selectedTime => setTime(selectedTime)}
    />
  );
};

Month-Year Picker

You want a month-year mode? Get it running as easy as pie.

import React, { useState } from 'react';
import DatePicker from 'react-native-modern-datepicker';

const MonthYearExample = () => {
  const [date, setDate] = useState('');

  return (
    <DatePicker
      mode="monthYear"
      selectorStartingYear={2000}
      onMonthYearChange={selectedDate => setDate(selectedDate)}
    />
  );
};

Props list

Here's the full list of available props

Prop

Type

Default

Description

onSelectedChange
Function
(dateString) => null
Gets called when selected value changes
onMonthYearChange
Function
(dateString) => null
Gets called when month changes
onTimeChange
Function
(dateString) => null
Gets called when time changes
onDateChange
Function
(dateString) => null
Gets called when date changes
current
String
Date()
Initially visible month
selected
String
""
The primary value of the date picker
minimumDate
String
""
Specifies the minimum selectable day by user
maximumDate
String
""
Specifies the maximum selectable day by user
selectorStartingYear
Number
0
The minimum selectable year when user opens the year selector
selectorEndingYear
Number
3000
The maxium selectable year when user opens the year selector
disableDateChange
Boolean
false
Disable month & year from being changed
isGregorian
Boolean
true
Switches between 'Gregorian' & 'Jalaali' mode
options
Object
{}
Customizing date picker style. backgroundColor, textHeaderColor, textDefaultColor, selectedTextColor, mainColor, textSecondaryColor, borderColor, defaultFont, headerFont, textFontSize, textHeaderFontSize, headerAnimationDistance, daysAnimationDistance
mode
String
"datepicker"
One of ['datepicker', 'calendar', 'monthYear', 'time']
minuteInterval
Number
5
One of [1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30, 60]
style
Object
{}
Changes date picker container style.

Utils

There are quite a few utils that might become handy for you

import { getToday, getFormatedDate } from 'react-native-modern-datepicker';

getToday(); // returns today's date.. e.g: 2019/10/12
//Get formatted date from Date object or date string "2019/..."
getFormatedDate(new Date(), "YYYY/MM/DD h:m"); 
getFormatedDate(timestamp, "jYYYY/jMM/jDD h:m"); //for jalaali