时间戳

首页 > 解决方案 > 如何为函数正确创建日期对象

javascript - 如何为函数正确创建日期对象

问题描述

我的表单上有一个字段的日期选择器，允许用户选择一个日期。提交表单时，日期对象被解析为后端 API 要求的正确格式的字符串。当我尝试获取一个对象来填充表单时，该输入字段的返回类型作为字符串返回。如果我尝试传递字符串，页面将崩溃。

当 API 返回一个应该填写下面显示的输入字段的字符串变量时，就会发生确切的问题。程序当前抛出 date.clone 不是函数的错误。

有人可以帮我弄清楚如何从后端传递字符串日期，以使其正确显示在前端吗？

这是接受日期对象并为后端创建字符串的函数。后端将 lastDateAccessed 作为字符串返回，lastDateAccessedHolder 是输入字段中可见的内容。

handleDateChange(date) {
    this.setState({ lastDateAccessedHolder: date });

    var lastDate = new Date(date);
    var day = lastDate.getDate();
    if(day.toString().length === 1)
    {
        day = '0' + day;
    }

    var month = lastDate.getMonth() + 1;
    if(month.toString().length === 1)
    {
        month = '0' + month;
    }

    var year = lastDate.getFullYear();
    this.setState(
        {lastDateAccessed: year+"-"+month+"-"+day},
        () => console.log(this.state.lastDateAccessed)
    );
}

这是使用日期选择器的行，并显示了输入字段：

<DatePicker selected={this.state.lastDateAccessedHolder} onChange={this.handleDateChange}/>

更新：后端将返回 responseData.lastDateAccessed。此变量将保存类似“2018-09-09”或“2016-12-03”的日期。

更新 2：我在 API 的 GET 函数中运行的代码是：

var dateString = responseData.lastDateAccessed;
     var finalDate = dateString.split('-');
     var done = new Date(finalDate[0], finalDate[1] - 1, finalDate[2]);
     this.setState({lastDateAccessedHolder: done});

错误：

index.js:318 Uncaught TypeError: date.clone is not a function
at safeDateFormat (index.js:318)
at DatePicker._this.renderDateInput (index.js:2844)
at DatePicker.render (index.js:2916)
at finishClassComponent (react-dom.development.js:8389)
at updateClassComponent (react-dom.development.js:8357)
at beginWork (react-dom.development.js:8982)
at performUnitOfWork (react-dom.development.js:11814)
at workLoop (react-dom.development.js:11843)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
at invokeGuardedCallback (react-dom.development.js:187)
at replayUnitOfWork (react-dom.development.js:11318)
at renderRoot (react-dom.development.js:11885)
at performWorkOnRoot (react-dom.development.js:12449)
at performWork (react-dom.development.js:12370)
at performSyncWork (react-dom.development.js:12347)
at requestWork (react-dom.development.js:12247)
at scheduleWorkImpl (react-dom.development.js:12122)
at scheduleWork (react-dom.development.js:12082)
at Object.enqueueSetState (react-dom.development.js:6644)
at addAsset../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:238)
at addAsset.js:71

标签： javascriptreactjsdatedatepicker

解决方案

这个答案假设您只需要日期。

确保 GET 请求返回的字符串遵循 ISO 格式：YYYY-MM-DD

有关更多详细信息，您可以参考这些答案 -链接 1和链接 2

更新：在更多的挖掘中，我遇到了这个问题，它建议按照评论之一中的建议使用时刻打包日期

<DatePicker
  className={styles.datePicker}
  selected={moment(this.props.endDate)}
  onChange={this.handleChangeEnd}
/>

推荐阅读