在本机反应的文本框中显示日期选择器答案

【问题标题】：Show date picker in textbox in react native在本机反应的文本框中显示日期选择器
【发布时间】：2017-06-19 11:44:32
【问题描述】：

我正在使用 react-native-datepicker 来显示日期选择器。我的问题是我有两个文本框用于开始日期和结束日期。我想在用户点击文本框时显示日期选择器。使用此代码显示日期选择器，但我希望在用户点击文本框时显示选择器。并且选择的日期应该绑定到文本框。

    <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})}}

我怎样才能做到这一点？任何帮助将不胜感激。提前谢谢！！！

【问题讨论】：

标签： javascript ios react-native

【解决方案1】：

试试下面的代码

功能

_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();

渲染

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}/>

【讨论】：

我想在文本输入中显示选择器，而不是在文本上点击
根据我的理解，当我们点击并在 TextInput 中键入一个字符时，onChangeText 回调会触发。我想这不适用于我的情况。

【解决方案2】：

将 ref 添加到日期选择器，

 <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 this.refs.datepicker.onPressDate();

【讨论】：