rn-persian-date-picker

a simple persian date picker for react native

ScreenShots :

.

Installing:

Step 1:

  npm i rn-persian-date-picker --save

OR

  yarn add rn-persian-date-picker

Step 2:

 react-native link react-native-picker

Usage

import PersianDatePicker from "rn-persian-date-picker";
export default class App extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: "blue",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <TouchableOpacity onPress={() => this.picker.showPicker()}>
          <View style={{ height: 80, width: 180, backgroundColor: "red" }}>
            <Text>
              {selectedDate.format("jYYYY/jMM/jDD")} //for more formats and functions go to moment-jalaali
            </Text>
          </View>
        </TouchableOpacity>
        <PersianDatePicker
          type="Gregorian"
          yearCount={10}
          onConfirm={date => this.setState({ selectedDate: date })}
          ref={ref => (this.picker = ref)}
        />
      </View>
    );
  }
}

props

prop	desc	example
type	type of date picker( can be "Gregorian" or "Jalali" )
yearCount	count of years to be show from now	10
pickerConfirmBtnText	text of confirm Button	"انتخاب"
pickerTitleText	title of picker	"تاریخ را انتخاب کنید"
pickerCancelBtnText	text of cancel Button	"لغو"
pickerCancelBtnColor	color of cancel button ( RGBA array )	[0, 0, 0, 1]
pickerToolBarBg	tollbar background color ( RGBA array )	[0, 0, 0, 1]
pickerConfirmBtnColor	color of confirm button ( RGBA array )	[0, 0, 0, 1]
pickerTitleColor	title color ( RGBA array )	[0, 0, 0, 1]
pickerBg	picker background color ( RGBA array )	[0, 0, 0, 1]
pickerFontFamily	font family of the picker items
minDate	picker start date (string, can be jalali( 1398/08/08 ) or gregorian( 2019/09/09 ) )
maxDate	picker max date(string, just like minDate, can be use instead of yearCount and)
onConfirm	function that be called when a date select(argument that pass to onConfirm is a Moment-jalali date object)	(date:moment-jalaali)
onPickerCancel	function that be called when a user press the cancel button

methods

method	desc	example
showPicker	open the date picker
hidePicker	close the date picker
isOpen	return date picker status (true : picker is open, false : picker is close)

Example

import React, { Component } from "react";
import { Text, View } from "react-native";
import PersianDatePicker from "rn-persian-date-picker";

export default class App extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: "blue",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <TouchableOpacity onPress={() => this.picker.showPicker()}>
          <View style={{ height: 80, width: 180, backgroundColor: "red" }}>
            <Text>
              {selectedDate.format("jYYYY/jMM/jDD")} //for more formats and
              functions go to moment Jalali
            </Text>
          </View>
        </TouchableOpacity>
        <PersianDatePicker
          type="Gregorian"
          yearCount={10}
          onConfirm={date => this.setState({ selectedDate: date })}
          ref={ref => (this.picker = ref)}
        />
      </View>
    );
  }
}