1.0.1 • Published 6 years ago

react-native-persian-date-picker v1.0.1

Weekly downloads
28
License
MIT
Repository
-
Last release
6 years ago

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

propdescexample
styleظاهر کلی تاریخ انتخاب شده
textStyleظاهر متن تاریخ انتخاب شده
pickerConfirmBtnTextتکست دکمه ی انتخاب تاریخانتخاب
pickerTitleTextتکست هدر انتخاب کننده تاریختاریخ را انتخاب کنید
pickerCancelBtnTextتکست دکمه ی انصرافانصراف
pickerCancelBtnColorرنگ دکمه ی انصراف بصورت RGBA0,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
selectedDateتاریخ از پیش انتخاب شده'1396/7/19'
minDateتاریخ شروع نمایش'1396/1/1'
maxDateتاریخ پایان نمایش'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',
    }
  });