React-Datepicker MomentJS 无效日期

Posted 2023-05-07

【中文标题】React-Datepicker MomentJS 无效日期

【英文标题】：React-Datepicker MomentJS Invalid Date

【发布时间】：2019-04-29 06:43:11

【问题描述】：

我正在使用 React-Datepicker 和 MomentJS。但是当我想使用 Moment 设置 startDate 时，该值在 datepickerfield 中给出了 Invalid date。

当我在控制台中记录 this.state.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"
  ,

【参考方案1】：

使用startDate: moment().toDate()。

.format('DD-MM-YYYY') 返回一个 string，而 DatePicker react 组件的 selected prop 需要一个 Date 对象。

【参考方案2】：

从 Hacker0x01 - “直到版本 1.8.0，这个包使用 Moment.js。从 v2.0.0 开始，我们切换到使用原生 Date 对象来减小包的大小。如果你从 1.8 切换。 0 到 2.0.0 或更高版本，请参阅上面的更新示例，查看示例站点以获取最新示例。”

https://github.com/Hacker0x01/react-datepicker

我也有类似的问题。在 react-datepicker 完成它之后，我将尝试将原生 Date 变成片刻。

【讨论】：

我通过将开始日期设置为时刻来处理它，然后将其转换为 react-datepicker 可以理解的原生日期。 this.state = startDate: moment().todate, ; 然后我马上将事件处理程序的结果包装起来。 startDate=moment(this.state.startDate)希望对您有所帮助

【参考方案3】：

@Elvira，我在使用react-datepicker@2.0.0 时遇到了同样的挑战。遵循您使用的任何 3rd 方包至关重要。 The issue of modules 被 ES6 推广，认为 moment.js 是 react-datepicker 中的额外包袱，因为 moment.js 是一个多合一的包，即 import moment from 'moment';

模块的概念使我们能够通过简单地导出对象、函数、类或变量，然后将它们导入到其他文件中需要的位置来使外部世界可用。

从react-datepicker@2.0.0、moment.js was removed as a dependency 开始，团队开始使用与 date-fns 配对的原生 javascript Date 对象来实现日期选择器中的所有日期功能。检查 react-datepicker calendar component 的 propTypes，您会注意到所有日期都声明为 PropTypes.instanceOf(Date)。

解决方案：坚持使用原生 JavaScript Date 对象。在用户从您的日历中选择一个日期后（阅读：react-datepicker），您始终可以使用 moment.js 将该日期对象转换为任何格式。

export class DateContainer extends React.Component 
  constructor(props) 
    super(props);
    // Used 'started' to avoid name conflicts, and return date object
    this.state =  started: new Date(), ;
  
  render() 
    const  started  = this.state
    return (
      // other jsx...
      <DatePicker
        // other props...
        selected=started
        startDate=started
      />
    );
  

以下是我如何处理这种情况： 环境： react@16.9.0、react-redux@7.1.1、react-datepicker@2.0.0、yup@0.27.0 和 Formik@1.5.8（在 react 中处理表单，变得简单)。

// stateless component
const InputForm = (
  // other destructered props...
  dispatch = f => f
) => 
  const values = 
    // initial state
  

  return (
    <Formik
      // other props...
      onSubmit=
        async (values) => 
          // Here is my solution...
          // convert date object from react-datepicker using moment.js,
          // before i dispatch my state object.
          const userData = 
            ...values,
            start_date: moment(values.start_date).format('YYYY-MM-DD')
          
          await dispatch(someAction(userData));
          // ...
        
      
    />
  )
;

export default connect()(InputForm);

【讨论】：

使用date-fns?这样做import format from 'date-fns 并分配start-date: format(values.join_date, 'yyyy-MM-dd')。它工作得很好。

【参考方案4】：

而不是在 this.state 中使用 moment 在 setState 中使用它对我有用

constructor(props) 
    super(props);
    this.state = 
      startDate: new Date(),
   



handleDateChange = date => 
    this.setState(
      startDate: moment(date).format('DD-MM-YYYY')
    );
  ;

【讨论】：

嗨，请解释你的代码，为什么它是一个答案以及问题是什么。

我刚刚编辑了代码，使用 this.state 中的时刻使日期显示为无效