rnp

react-native-persian-date-picker

Simple Persian(jalali) DatePicker for react native. ⚛

Showing:

Popularity

Downloads/wk

828

Maintenance

No Maintenance Data Available

Package

Dependencies

3

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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رنگ دکمه ی انصراف بصورت 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]
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',
    }
  }); 

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100