1.0.1 • Published 6 years ago
react-native-persian-date-picker v1.0.1
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 |
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',
}
});