1.0.4 • Published 2 years ago

react-native-datetimepicker-pro v1.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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

Screenshot_1652875688

Screenshot_1652875715

Screenshot_1652875701

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

PropTypeOptionalDefaultDescription
isGregorianboolYestrueGregorian calendar is the default. if shamsi is required set this prop to false.
selectedstringYesnullfor gregorian the format should be 'YYYY-MM-DD' and for shamsi 'jYYYY/jMM/jDD'
onSelectedChangefuncNo (required)Selected date is returned as a parameter to the function.
optionspropsYesSome visual effects like font and colors are asigned threw this prop. Check the options prop description table for more info.

Options Props

PropTypeOptionalDefaultDescription
defaultFontstringYes'System'font of dates and times.
headerFontstringYes'System'font of the headers
textFontSizeintYes15
textHeaderFontSizeintYes17
mainColorstringYes#61dafbany color format is supported.
backgroundColorstringYes#fffany color format is supported.
textHeaderColorstringYes#212c35any color format is supported.
textDefaultColorstringYes#2d4150any color format is supported.
selectedTextColorstringYes#2d4150any color format is supported.
textSecondaryColorstringYes#7a92a5any color format is supported.
borderColorstringYes#rgba(122, 146, 165, 0.1)any color format is supported.