🗓️
React Native Wheel Date Picker This module provides a simple carousel date picker with support of gregorian and jalaali date.
The package is both Android and iOS compatible.
Installation
$ yarn add @masoudltf/react-native-wheel-date-picker
or
$ npm install @masoudltf/react-native-wheel-date-picker
This module used react-native-snap-carousel and moment-jalaali and linking is not required.
Usage
First, you need to import module in your component.
import {WheelDatePicker} from "react-native-wheel-date-picker";
Then you can use module, like this:
<WheelDatePicker ref={ref => this._wheelDatePicker = ref}
fromYear={2011}
toYear={2021}
locale={'en'}
defaultDate={{year: 2021, month: 12, day: 15}}
calendarType={'gregorian'}/>
Properties
All properties are optional.
Param | Type | Default | Description |
---|---|---|---|
calendarType | String | gregorian |
Two type of calendars ('gregorian' or 'jalaali') are supported. |
locale | String | en |
Display numbers and month names in english or persian. |
defaultDate | Object | Current Date |
Depends on calendar type, default selected date is current gregorian or jalaali date. You can set this property like this: {year: 2021, month: 12, day: 15}
|
toYear | Number | Current year |
Maximum selectable year. |
fromYear | Number | 10 years less than toYear |
Minimum selectable year. |
rowHeight | Number | 50 |
Height of the picker rows. |
numberOfRows | Number | 3 |
Number of the visible picker rows. |
onDateChange | Function | undefined |
Fired when any change happens in date picker. Selected date is available in method. onDateChange = (selectedDate) => {}
|
textStyles | Object | undefined |
Custom style for texts. |
Methods
Method | Return Type | Sample | Description |
---|---|---|---|
getSelectedDate | Object | {year: '2021', month: '12', day: '15'} |
Returns selected date in gregorian |