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 |