Question

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

日期选择器代码已经在工作，但是当我尝试编写时，例如如果我尝试编写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>

Answer 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

Answer 2

您必须首先导入Date-picker依赖项：

导入日期选择器和时刻：

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

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

2 个答案: