React-Datepicker MomentJS无效日期

12 浏览
0 Comments

React-Datepicker MomentJS无效日期

我正在使用React-Datepicker和MomentJS。但是当我想使用Moment来设置startDate时，datepickerfield中的值会显示为无效日期。

当我在控制台中记录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 (
          发布日期
          
    );
  }
}

有人能解释一下为什么浏览器中显示为无效日期吗？

我的依赖项：

"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"

},

0

3 答案

0 Comments

React-Datepicker MomentJS Invalid Date问题的原因是format('DD-MM-YYYY')方法返回的是字符串，而DatePicker组件的selected属性需要的是一个Date对象。解决方法是使用startDate: moment().toDate()。

在使用React-Datepicker MomentJS的过程中，有一个常见的问题是Invalid Date的错误。这个错误的原因是format('DD-MM-YYYY')方法返回的是一个字符串，而DatePicker组件的selected属性需要的是一个Date对象。

解决这个问题的方法是使用startDate: moment().toDate()。这个方法将返回一个Date对象，可以正确地被DatePicker组件的selected属性接受。

具体的解决代码如下：

startDate: moment().toDate()

这行代码将使用moment()方法获取当前时间，并通过toDate()方法将其转换为一个Date对象。这样就可以解决React-Datepicker MomentJS Invalid Date的问题。

，React-Datepicker MomentJS Invalid Date问题的原因是format('DD-MM-YYYY')方法返回的是一个字符串，而DatePicker组件的selected属性需要的是一个Date对象。解决这个问题的方法是使用startDate: moment().toDate()。这样就可以正确地使用React-Datepicker MomentJS，并避免Invalid Date的错误。

0
0 Comments

React-Datepicker MomentJS Invalid Date问题的出现原因是，从react-datepicker.0.0版本开始，moment.js被移除作为依赖项，并改用原生的JavaScript Date对象以及date-fns库来处理日期功能。在react-datepicker的calendar组件的propTypes中，所有的日期都被声明为PropTypes.instanceOf(Date)。

解决方法是坚持使用原生的JavaScript Date对象。在用户从日历中选择日期后，可以使用moment.js将该日期对象转换为所需的格式。

以下是一个使用React组件的示例，其中使用了react-datepicker来选择日期：

export class DateContainer extends React.Component {
  constructor(props) {
    super(props);
    // 使用'started'以避免命名冲突，并返回日期对象
    this.state = { started: new Date(), };
  }
  render() {
    const { started } = this.state
    return (
      // 其他jsx...
      
    );
  }
}

以下是处理这种情况的示例代码：

// 无状态组件
const InputForm = ({
  // 其他解构的props...
  dispatch = f => f
}) => {
  const values = {
    // 初始状态
  }
  return (
     {
          // 在发送state对象之前，使用moment.js将react-datepicker中的日期对象转换为所需的格式
          const userData = {
            ...values,
            start_date: moment(values.start_date).format('YYYY-MM-DD')
          }
          await dispatch(someAction(userData));
          // ...
        }
      }
    />
  )
};
export default connect()(InputForm);

如果使用date-fns库，可以导入format函数并将日期格式化为所需的格式，例如：`start-date: format(values.join_date, 'yyyy-MM-dd')`。

通过这些解决方法，可以避免React-Datepicker MomentJS Invalid Date问题的出现。

0
0 Comments

问题的原因是React-Datepicker从版本1.8.0开始使用原生的Date对象，而之前的版本使用的是Moment.js。因此，当从1.8.0版本切换到2.0.0或更高版本时，可能会出现React-Datepicker MomentJS Invalid Date的问题。

解决方法是将原生的Date对象转换为Moment对象。可以通过在state中将startDate设置为Moment对象的形式来解决问题，然后将其转换为React-Datepicker可以理解的原生Date对象。具体操作如下：

this.state = {
  startDate: moment().toDate(),
};

然后，在事件处理程序中使用moment函数将结果包装在Moment对象中，如下所示：

startDate={moment(this.state.startDate)}

希望这可以帮到你。

0