菜鸟教程小白 发表于 2022-12-11 19:54:00

javascript - 在 native react 的文本框中显示日期选择器


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

<pre><code>    &lt;DatePicker
    style={{width: 200}}
    date={this.state.date}
    mode=&#34;date&#34;
    placeholder=&#34;Select date&#34;
    format=&#34;YYYY-MM-DD&#34;
    minDate=&#34;2016-05-01&#34;
    maxDate=&#34;2020-12-12&#34;
    confirmBtnText=&#34;OK&#34;
    cancelBtnText=&#34;Cancel&#34;
    onDateChange={(date) =&gt; {this.setState({date: date})}}
</code></pre>

<p>我怎样才能做到这一点?任何帮助将不胜感激。提前谢谢!!!</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>试试下面的代码</p>

<blockquote>
<p>function</p>
</blockquote>

<pre><code>_showDateTimePicker = () =&gt; this.setState({ isDateTimePickerVisible: true });

_hideDateTimePicker = () =&gt; this.setState({ isDateTimePickerVisible: false });

_handleDatePicked = date =&gt; {
    var dobValue=&#39;Select Date of Birth&#39;;
    var date = new Date(date);
    if (! isNaN(date)) {
      this.setState({ dob: date });
    }
    this._hideDateTimePicker();
</code></pre>

<blockquote>
<p>render</p>
</blockquote>

<pre><code>var dobValue=&#39;Select Date of Birth&#39;;

var date = new Date(this.state.dob);
dobValue= isNaN(date) ? this.state.dob :date.getDate() + &#34;/&#34;+ parseInt(date.getMonth()+1) +&#34;/&#34;+ date.getFullYear();


&lt;DateTimePicker isVisible={this.state.isDateTimePickerVisible} onConfirm={this._handleDatePicked} onCancel={this._hideDateTimePicker}/&gt;

&lt;Input style={{fontSize:16,padding:6,borderColor:&#39;#C8C8C8&#39;,borderWidth: 1}} placeholder=&#34;Email&#34; onChangeText={this._showDateTimePicker} value={dobValue}/&gt;
</code></pre></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - 在 nativereact 的文本框中显示日期选择器,我们在Stack Overflow上找到一个类似的问题:
                                                        <a href="https://stackoverflow.com/questions/44629668/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/44629668/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: javascript - 在 native react 的文本框中显示日期选择器