reactjs - React-Datepicker MomentJS 无效日期
问题描述
我正在使用 React-Datepicker 和 MomentJS。但是当我想使用 Moment 来设置 startDate 时,该值在 datepicker 字段中给出了无效的日期。
当我在控制台中记录 this.state.startDate 时,控制台会显示以下内容:“startdate:27-11-2018”,其格式为“DD-MM-YYYY”。此格式也用于 DatePicker 组件。
import * as React from "react";
import * as ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import * as moment from "moment";
import "moment/locale/nl";
export class DateContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate: moment().format('DD-MM-YYYY'),
};
}
render() {
console.log('startdate:',this.state.startDate);
return (
<div className="date-Filter">
<div className="date-Filter-Title">Release Date</div>
<DatePicker
onChange={this.handleStartDate}
selected={this.state.startDate}
dateFormat="DD-MM-YYYY"
isClearable={true}
placeholderText="Select a date other than today or yesterday"
fixedHeight={true}
tetherConstraints={ [] }
locale="nl"
popperPlacement="right-start"
popperModifiers={{
flip: {
enabled: false
},
preventOverflow: {
enabled: true,
escapeWithReference: false
}
}}
selectsStart
startDate={this.state.startDate}
className="startDate"
showMonthDropdown
showYearDropdown
/>
</div>
);
}
}
有人可以向我解释为什么它在浏览器中显示无效日期。
我的依赖:
"dependencies": {
"moment": "^2.22.2",
"react": "^16.6.0",
"react-datepicker": "^2.0.0",
"react-dom": "^16.6.0",
"sass-loader": "^7.1.0",
"searchkit": "^2.3.1-alpha.4"
},
解决方案
使用startDate: moment().toDate()
.
.format('DD-MM-YYYY')
返回一个string,而DatePicker反应组件的 selected 属性需要一个Date对象。
推荐阅读
- arm64 - kubeadm init 在 ARM64 上失败
- javascript - 流图可以缩放吗?
- visual-studio - 在 Xamarin.forms 中找不到页面
- c# - 将泛型方法转换为异步导致泛型参数出现问题
- asp.net-mvc - 按钮组和 MVC 问题
- module - 从 Odoo8 到 Odoo11:rmanage report_sxw
- c# - 用 C++ 编写 .Net 窗口应用程序
- angular - 以角度声明对象的可观察数组
- java - md5_file() PHP 不同于 Java MD5 for txt 文件
- reactjs - 如何在表单操作 url 中传递变量?