React-native-jalaali-date-picker NPM

React Native Jalaali (Persian) DatePicker

This is a Jalaali (Persian) Date Picker Component for React Native

The package is both Android and iOS compatible.

Installation

$ yarn add react-native-persian-date-picker

$ npm install react-native-persian-date-picker --save

Prerequisites

DatePicker requires Moment JS. Date props may be anything parseable by Moment: Javascript Date, Moment date, or ISO8601 datetime string.

Usage

How to use it:

import React, {Component} from 'react';
import DatePicker from './persianDatePicker'

export default class App extends Component {
    render() {
        return (
            <DatePicker
                showTitleDate={true}
                onChangeDate={(date)=>{
                console.log(date)
            }}
            />
        );
    }
}

PersianCalendarPicker props

Prop	Type	Description
`defDate`	`Moment date`	Optional. Open date picker with custome date. Default is `today`
`defDateString`	`Strings`	Optional. Open date picker with custome string . Eg. `2017/02/04`
`style`	`ViewStyle`	Optional. Main Datepicker style . Default is '{}'
`showTitleDate`	`Boolean`	Optional. Show current date in the header of date picker . Default is `false`
`titleDateFormat`	`String`	Optional. Change format of header date . Default is `dddd - jMM - jYYYY`
`TitleDateStyle`	`ViewStyle`	Optional. Change style of header dare. Default is `{}`
`btnColor`	`String`	Optional. BackgroundColor for Top and bottom Buttons
`btnStyle`	`ViewStyle`	Optional. Style Bottom and Top Buttons.
`btnUnderlayColor`	`String`	Optional. UderlayColor colors for buttons
`arrowTintColor`	`String`	Optional. Change color of buttons arrow .
`arrowSize`	`Number`	Optional. Change arrows size .
`dateBoxStyle`	`ViewStyle`	Optional. Middle date box style .
`dateStyle`	`ViewStyle`	Optional. Change current date style like fontFamily , color , FontSize .
`onChangeDate`	`Function`	Optional. return date on changing

Styles

Some styles will overwrite some won't. For instance:

If you provide textStyle with fontFamily and color, out of ranges dates will not apply your color, just fontFamily.

Order of precedence:

defaultColor => textStyle => selectedDayColor
defaultTodayBackgroundColor => todayBackgroundColor
defaultBackgroundColor => selectedDayColor
defaultTextStyles => textStyle => selectedDayTextColor

Suggestions?

Open Issues. Submit PRs.

moment-jalaali

@infinitebrahmanuniverse/nolb-react-native-j @everything-registry/sub-chunk-2581 @zalastax/nolb-react-native-j

1.0.0

6 years ago