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. |