React Native DateTimePicker Pro 📆

A customizable calendar, time & month picker for React Native (including Persian Jalaali calendar & locale). For more information and documentation, please visit website

Installation

npm package users

npm i react-native-datetimepicker-pro

yarn package users

yarn add react-native-datetimepicker-pro

Examples

Basic example

import React, { useState } from 'react';
import DatePicker from 'react-native-datetimepicker-pro';

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

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

Jalali Calendar

import React from 'react';
import DatePicker, { getFormatedDate } from 'react-native-datetimepicker-pro';

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

API

Props

Prop	Type	Optional	Default	Description
isGregorian	bool	Yes	true	Gregorian calendar is the default. if shamsi is required set this prop to false.
selected	string	Yes	null	for gregorian the format should be 'YYYY-MM-DD' and for shamsi 'jYYYY/jMM/jDD'
onSelectedChange	func	No (required)		Selected date is returned as a parameter to the function.
options	props	Yes		Some visual effects like font and colors are asigned threw this prop. Check the options prop description table for more info.

Options Props

Prop	Type	Optional	Default	Description
defaultFont	string	Yes	'System'	font of dates and times.
headerFont	string	Yes	'System'	font of the headers
textFontSize	int	Yes	15
textHeaderFontSize	int	Yes	17
mainColor	string	Yes	#61dafb	any color format is supported.
backgroundColor	string	Yes	#fff	any color format is supported.
textHeaderColor	string	Yes	#212c35	any color format is supported.
textDefaultColor	string	Yes	#2d4150	any color format is supported.
selectedTextColor	string	Yes	#2d4150	any color format is supported.
textSecondaryColor	string	Yes	#7a92a5	any color format is supported.
borderColor	string	Yes	#rgba(122, 146, 165, 0.1)	any color format is supported.