react-native-persian-date-picker

a simple persian date picker for react native

ScreenShots :

.

Installing:

Step 1:

  npm i react-native-persian-date-picker --save

Step 2:

 react-native link react-native-picker
 

Usage

import PersianDatePicker from 'react-native-persian-date-picker';
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <PersianDatePicker />
      </View>
    );
  }
}

props

| prop | desc | example | | ------------- |:-------------:| -----: | | style | ظاهر کلی تاریخ انتخاب شده | | | textStyle | ظاهر متن تاریخ انتخاب شده | | | pickerConfirmBtnText | تکست دکمه ی انتخاب تاریخ | انتخاب | | pickerTitleText | تکست هدر انتخاب کننده تاریخ | تاریخ را انتخاب کنید | | pickerCancelBtnText | تکست دکمه ی انصراف | انصراف | | pickerCancelBtnColor | رنگ دکمه ی انصراف بصورت RGBA | [0,0,0,1] | | pickerToolBarFontSize | اندازه فونت هدر انتخاب کننده تاریخ | ۱۸ | | pickerFontSize | اندازه فونت انتخاب کننده | ۱۸ | | pickerToolBarBg | رنگ بکگراند هدر انتخاب کننده | [232, 232, 232, 1] | | pickerConfirmBtnColor | رنگ دکمه ی انتخاب تاریخ | [0,0,0,1] | | pickerTitleColor | رنگ تکست هدر انتخاب کننده | [0,0,0,1] | | pickerBg | رنگ بک گراند انتخاب کننده | [255, 255, 255,255] | | yearCount | تعداد سال های قابل نمایش | ۳۰ | | selectedDate | تاریخ از پیش انتخاب شده | '1396/7/19' | | minDate | تاریخ شروع نمایش | '1396/1/1' | | onConfirm | متدی که با زدن دکمه انتخاب تاریخ فراخوانده میشود | | | onCancel | متدی که با انصراف از انتخاب تاریخ فراخوانده میشود | | | onSelect | متدی که با هربار تغییر تاریخ فراخوانده میشود | |

Example

    
  import React, { Component } from 'react';
  import {
    Platform,
    StyleSheet,
    Text,
    View
  } from 'react-native';
  import PersianDatePicker from 'react-native-persian-date-picker';


  export default class App extends Component {

    constructor(props){
      super(props);
      this.state = {
        selectedDay: undefined,
        selectedYear: undefined,
        selectedMonth: undefined
      };
    }
    onDateConfirm=data=>{
      this.setState({ selectedYear: data[0], selectedMonth: data[1], selectedDay: data[2] });
    }
    render() {
      return (
        <View style={styles.container}>
          <PersianDatePicker onConfirm={this.onDateConfirm}  />
        </View>
      );
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    }
  });