[英]Show date picker in textbox in react native
I'm using react-native-datepicker to show date picker. 我正在使用react-native-datepicker显示日期选择器。 My problem is I have two text box for start and end date.
我的问题是我有两个文本框,分别表示开始日期和结束日期。 I want to show date picker when the user tap on text box.
我想在用户点击文本框时显示日期选择器。 With this code its showing date picker but I want picker to be shown when user taps on textbox.
使用此代码,它可以显示日期选择器,但是我希望在用户点击文本框时显示选择器。 And the selected date should be bind to the textbox.
并且所选日期应绑定到文本框。
<DatePicker
style={{width: 200}}
date={this.state.date}
mode="date"
placeholder="Select date"
format="YYYY-MM-DD"
minDate="2016-05-01"
maxDate="2020-12-12"
confirmBtnText="OK"
cancelBtnText="Cancel"
onDateChange={(date) => {this.setState({date: date})}}
How can I achieve this? 我该如何实现? Anyhelp could be appreciated.
任何帮助,不胜感激。 Thanks in advance!!!
提前致谢!!!
Try the below code 试试下面的代码
function
功能
_showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true });
_hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false });
_handleDatePicked = date => {
var dobValue='Select Date of Birth';
var date = new Date(date);
if (! isNaN(date)) {
this.setState({ dob: date });
}
this._hideDateTimePicker();
render
给予
var dobValue='Select Date of Birth';
var date = new Date(this.state.dob);
dobValue= isNaN(date) ? this.state.dob :date.getDate() + "/"+ parseInt(date.getMonth()+1) +"/"+ date.getFullYear();
<DateTimePicker isVisible={this.state.isDateTimePickerVisible} onConfirm={this._handleDatePicked} onCancel={this._hideDateTimePicker}/>
<Input style={{fontSize:16,padding:6,borderColor:'#C8C8C8',borderWidth: 1}} placeholder="Email" onChangeText={this._showDateTimePicker} value={dobValue}/>
Add ref to datepicker, 将引用添加到日期选择器,
<DatePicker
style={{width: 200}}
ref='datepicker'
date={this.state.date}
mode="date"
placeholder="Select date"
format="YYYY-MM-DD"
minDate="2016-05-01"
maxDate="2020-12-12"
confirmBtnText="OK"
cancelBtnText="Cancel"
onDateChange={(date) => {this.setState({date: date})}}
onTap of text call this.refs.datepicker.onPressDate(); 文本的onTap调用this.refs.datepicker.onPressDate();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.