DatePicker در react native
سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری یک DatePicker در ReactNative برای هر دو پلتفرم Android و Ios داشته باشیم.بطور پیشفرض ReactNative دو DatePicker متفاوت به نام های DatePickerIOS و DatePickerAndroid داره اما کمی سخته از دو تا کامپوننت برای یک کار یکسان استفاده کنی.به همین دلیل برای DatePicker ما از یک کتابخانه به اسم react-native-datepicker-dialog استفاده میکنیم که برای هر دو پلتفرم Android و Ios مناسبه.
1.ساخت یک پروژه جدید.اگه نمیدونید چطور اینکارو بکنید،پیشنهاد میکنم دوره آموزش مقدماتی react native رو ببینید(برای مک هم میتونید مقاله آموزش نصب react native بر روی مک رو مطالعه کنید)
2.اضافه کردن کتابخانه react-native-datepicker-dialog به پروژه
برای اینکار command prompt رو در مسیر پروژه باز کنید و دستور زیر رو اجرا کنید
|
1 |
npm i react-native-datepicker-dialog --save |
3.بعد از نصب موفقیت آمیز کتابخانه react-native-datepicker-dialog نیاز به یک کتابخانه سرشناس دیگه به نام moment داریم.برای نصب کتابخانه moment نیازه که command prompt رو در مسیر پروژه باز کنیم و دستور زیر رو اجرا کنیم
|
1 |
npm install --save moment react-moment |
4.اضافه کردن کامپوننت هایAppRegistry, StyleSheet, Text, View, TouchableOpacity در بلاک import
|
1 2 3 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableOpacity } from 'react-native'; |
5.ایمپورت کردن DatePickerDialog و moment
|
1 2 3 |
import { DatePickerDialog } from 'react-native-datepicker-dialog' import moment from 'moment'; |
6.ایجاد constructor درون کلاس اصلی و تعریف دو متغیر DateText و DateHolder با استفاده از state
|
1 2 3 4 5 6 7 8 9 10 11 12 |
constructor(props){ super(props); this.state = { DateText: '', DateHolder: null, } } |
7.ایجاد یک تابع به نام () DatePickerMainFunctionCall.این تابع در رویداد Text box onPress فراخوانی میشه.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
DatePickerMainFunctionCall = () => { let DateHolder = this.state.DateHolder; if(!DateHolder || DateHolder == null){ DateHolder = new Date(); this.setState({ DateHolder: DateHolder }); } //To open the dialog this.refs.DatePickerDialog.open({ date: DateHolder, }); } |
8.ایجاد یک تابع دیگه به اسم() onDatePickedFunction با date argument.این تابع بعد از() DatePickerMainFunctionCall فراخوانی میشه.این تابع تاریخ انتخابی رو درون Text component تنظیم میکنه.
|
1 2 3 4 5 6 |
onDatePickedFunction = (date) => { this.setState({ dobDate: date, DateText: moment(date).format('DD-MMM-YYYY') }); } |
9.اضافه کردن View در بلاک render return .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
render() { return ( <View style={styles.container}> <Text style={styles.content}> React Native Date Picker Dialog Example </Text> <TouchableOpacity onPress={this.DatePickerMainFunctionCall.bind(this)} > <View style={styles.datePickerBox}> <Text style={styles.datePickerText}>{this.state.DateText}</Text> </View> </TouchableOpacity> {/* Place the dialog component at end of your views and assign the references, event handlers to it.*/} <DatePickerDialog ref="DatePickerDialog" onDatePicked={this.onDatePickedFunction.bind(this)} /> </View> ); } |
10.ایجاد استایل برای تمام views
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
const styles = StyleSheet.create({ container: { flex: 1, padding: 10, backgroundColor: '#FFFFFF' }, content: { fontSize: 20, textAlign: 'center', margin: 10, }, datePickerBox:{ marginTop: 9, borderColor: '#FF5722', borderWidth: 0.5, padding: 0, borderTopLeftRadius: 4, borderTopRightRadius: 4, borderBottomLeftRadius: 4, borderBottomRightRadius: 4, height: 38, justifyContent:'center' }, datePickerText: { fontSize: 14, marginLeft: 5, borderWidth: 0, color: '#000', }, }); |
11.کد کامل برنامه در فایل index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableOpacity } from 'react-native'; import { DatePickerDialog } from 'react-native-datepicker-dialog' import moment from 'moment'; export default class Mainproject extends Component { constructor(props){ super(props); this.state = { DateText: '', DateHolder: null, } } /** * Textbox click listener */ DatePickerMainFunctionCall = () => { let DateHolder = this.state.DateHolder; if(!DateHolder || DateHolder == null){ DateHolder = new Date(); this.setState({ DateHolder: DateHolder }); } //To open the dialog this.refs.DatePickerDialog.open({ date: DateHolder, }); } /** * Call back for dob date picked event * */ onDatePickedFunction = (date) => { this.setState({ dobDate: date, DateText: moment(date).format('DD-MMM-YYYY') }); } render() { return ( <View style={styles.container}> <Text style={styles.content}> React Native Date Picker Dialog Example </Text> <TouchableOpacity onPress={this.DatePickerMainFunctionCall.bind(this)} > <View style={styles.datePickerBox}> <Text style={styles.datePickerText}>{this.state.DateText}</Text> </View> </TouchableOpacity> {/* Place the dialog component at end of your views and assign the references, event handlers to it.*/} <DatePickerDialog ref="DatePickerDialog" onDatePicked={this.onDatePickedFunction.bind(this)} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, padding: 10, backgroundColor: '#FFFFFF' }, content: { fontSize: 20, textAlign: 'center', margin: 10, }, datePickerBox:{ marginTop: 9, borderColor: '#FF5722', borderWidth: 0.5, padding: 0, borderTopLeftRadius: 4, borderTopRightRadius: 4, borderBottomLeftRadius: 4, borderBottomRightRadius: 4, height: 38, justifyContent:'center' }, datePickerText: { fontSize: 14, marginLeft: 5, borderWidth: 0, color: '#000', }, }); AppRegistry.registerComponent('Mainproject', () => Mainproject); |
اسکرین شات:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
آموزش React Navigation 5
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
با سلام و تشکر. این تقویم شمسی هم داره؟
سلام.
برای نسخه شمسی میتونید از پکیج زیر استفاده کنید
https://github.com/mohammad-goldast/React-native-jalali-date-picker