1.0.0 • Published 2 years ago
@masoudltf/react-native-wheel-date-picker v1.0.0
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 |
1.0.0
2 years ago