如何在日期格式的字段中写入日期？答案

【问题标题】：How to write date in a field with date format?如何在日期格式的字段中写入日期？
【发布时间】：2019-06-19 05:56:53
【问题描述】：

如果我们选择datepicker，我想同时写一个日期，日期可以选择

日期选择器代码已经在工作，但是当我尝试编写它时，它不会以日期格式显示，例如，如果我尝试编写 05/01/2019 它显示为 05012019 我希望它为 05/01/2019 格式。

<div>
<Field name="BirthDate" component= {datepicker} placeholder={'DAY / MONTH / YEAR'}/>
</div>

日期选择器代码

 const { input: { value, onChange }, disabled, showTime } = this.props;
        return (
            <div className="datepicker">
                <DatePicker
                    selected={value ? moment(value) : null}
                    onChange={onChange}
                    disabled={disabled}
                    format="dd/mm/yyyy"
                    time={showTime}
                />
                <div className="calendar-block">
                    <CalendarIcon onClick={this.datepicker}
                    />
                </div>
            </div>

【问题讨论】：

您正在使用哪个日期选择器，因为它们太多了
反应日期选择器

标签： reactjs datepicker

【解决方案1】：

简·弗雷德

尝试如下

const datepicker = ({ input: { onChange, value }, showTime }) =>
     <div className="datepicker">
            <DatePicker
                selected={value ? new Date(moment(value)) : null}
                onChange={onChange}
                disabled={disabled}
                showTimeSelect
                showTimeSelectOnly
                dateFormat="dd/mm/yyyy"
            />
            <div className="calendar-block">
                <CalendarIcon onClick={this.datepicker}
                />
            </div>
        </div>

并像使用它一样

<div>
<Field name="BirthDate" component= {datepicker} placeholder={'DAY / MONTH / YEAR'}/>
</div>

谢谢

所以，more info

【讨论】：

你能在这里分享datepicker组件吗
让我问一件事，如何在现场设置放映时间？
请查看答案`showTimeSelect, timeFormat="HH: mm"`如果您需要更多请点击更多信息
我想你不明白我想说什么，日期选择器中选择的日期以正确的格式书写。但是我在字段中写的日期不是格式
让我们continue this discussion in chat.

【解决方案2】：

您必须首先导入日期选择器依赖项：

导入日期选择器和时刻：

import DatePicker from 'react-datepicker'; import moment from 'moment';
添加html输入如下：

<DatePicker selected={this.state.selectedDate} onChange={this.handleDateChange} name="Start Date" dateFormat="dd-mm-yyyy" />
HandleDateChange 和 selectedDate 如下：

在你的构造方法中添加：

this.state = { selectedDate: moment() }

this.handleDateChange = this.handleDateChange.bind(this);

添加这个方法：

handleDateChange(date){ this.setState({ selectedDate: date }); }

【讨论】：