react-native-datetimepicker-pro
Version:
A customizable calendar, time & month picker for React Native (including Persian Jalaali calendar & locale)
86 lines (63 loc) • 3.96 kB
Markdown
# 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](https://h-assefi.github.io/react-native-datetimepicker-pro)
## 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. |