代码之家 › 专栏 › 技术社区 › Elvira

React Datepicker MomentJS无效日期

momentjs datepicker reactjs

Elvira · 技术社区 · 6 年前

我在用React Datepicker和MomentJS。但是,当我想使用矩来设置startDate时,该值在datepickerfield中给出了无效的日期。

当我在控制台中记录this.state.startDate时,控制台将显示以下内容: “起始日期:2018年11月27日”,格式为“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"
  },

2 回复 | 直到 6 年前

RyanZim nir 6 年前

使用 startDate: moment().toDate() . .format('DD-MM-YYYY') 返回字符串,而 DatePicker react组件需要 Date 反对。

Lance Crowder 6 年前

从Hacker0x01到1.8.0版本,这个包使用的是Moment.js。从v2.0.0开始,我们切换到使用本机日期对象来减小包的大小。如果您要从1.8.0切换到2.0.0或更高版本,请参阅上面的更新示例,查看示例站点以获取最新示例。”

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

我也有类似的问题。我将尝试在react datepicker完成它的任务后将本地日期转换为一个瞬间。

MwamiTovi 6 年前

@艾薇拉,我在使用 react-datepicker@2.0.0 . 遵循您使用的任何第三方软件包是非常重要的。 The issue of modules 如ES6所认为的 moment.js react datepicker中的额外行李 矩.js 是一个一体化的软件包。 import moment from 'moment';

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

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

解决方案: 坚持使用本机JavaScript日期对象。用户从日历中选择日期(read:react datepicker)后,您始终可以使用 矩.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);

-2

ChrisR 6 年前

而不是在这个状态下使用矩在设置状态下使用它。。对我有用

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



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