为什么 react-datepicker 没有选择正确的日期？

Question

我是 React 的新手，我使用过 this datepicker 并使用了以下代码

    class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date()
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    });
  }

  render() {
    return (
      <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
      />
    );
  }
}

handlechange的定义如下

handleChange(date) {
        this.setState({
            startDate: date
        });
    }

在此之后，我将该日期转换为程序中需要的格式

var dateformat = (new Intl.DateTimeFormat('en-US',
            { year: 'numeric', month: '2-digit', day: '2-digit', 
hour: '2-digit', minute: '2-digit', second: '2-digit' }).format(this.state.startDate));

有时它会选择正确的日期。但大多数时候它会返回默认的 01-01-0001 12:00:00 AM 日期和时间。

由于那个日期，我通常得到的异常如下：

"System.Data.SqlTypes.SqlTypeException: SqlDateTime overflow. Must be between 1/1/1753 12:00:00 AM and 12/31/9999 11:59:59 PM.\r\n at System.Data.SqlTypes.SqlDateTime.FromTimeSpan(TimeSpan value)\r\n at System.Data.SqlTypes.SqlDateTime.FromDateTime(DateTime value)\r\n at System.Data.SqlTypes.SqlDateTime..ctor(DateTime value)\r\n at System.Data.SqlClient.MetaType.FromDateTime(DateTime dateTime, Byte cb)\r\n at System.Data.SqlClient.TdsParser.WriteUnterminatedValue(Object value, MetaType type, Byte scale, Int32 actualLength, Int32 encodingByteSize, Int32 offset, TdsParserStateObject stateObj, Int32 paramSize, Boolean isDataFeed)\r\n at System.Data.SqlClient.TdsParser.TdsExecuteRPC(_SqlRPC[] rpcArray, Int32 timeout, Boolean inSchema, SqlNotificationRequest notificationRequest, TdsParserStateObject stateObj, Boolean isCommandProc, Boolean sync, TaskCompletionSource1 completion, Int32 startRpc, Int32 startParam)\r\n at System.Data.SqlClient.SqlCommand.RunExecuteReaderTds(CommandBehavior cmdBehavior, RunBehavior runBehavior, Boolean returnStream, Boolean async, Int32 timeout, Task& task, Boolean asyncWrite, SqlDataReader ds)\r\n at System.Data.SqlClient.SqlCommand.RunExecuteReader(CommandBehavior cmdBehavior, RunBehavior runBehavior, Boolean returnStream, TaskCompletionSource1 completion, Int32 timeout, Task& task, Boolean asyncWrite, String method)\r\n at System.Data.SqlClient.SqlCommand.ExecuteReader(CommandBehavior behavior)\r\n at System.Data.SqlClient.SqlCommand.ExecuteDbDataReader(CommandBehavior behavior)\r\n at System.Data.Common.DbCommand.ExecuteReader()\r\n
at Microsoft.EntityFrameworkCore.Storage.Internal.RelationalCommand.Execute(IRelationalConnection connection, DbCommandMethod executeMethod, IReadOnlyDictionary2 parameterValues)\r\n at Microsoft.EntityFrameworkCore.Storage.Internal.RelationalCommand.ExecuteReader(IRelationalConnection connection, IReadOnlyDictionary2 parameterValues)\r\n at Microsoft.EntityFrameworkCore.Update.ReaderModificationCommandBatch.Execute(IRelationalConnection connection)"

任何人都可以帮助我了解我在哪里犯了错误吗？那个反应日期选择器有什么错误吗？请给我这个问题的解决方案。

Answer 1

要格式化 date，moment 是一个不错的选择。

moment(this.state.startDate).format('DD/MM/YYYY')

Demo

Answer 2

首先将 date 转换为 localestring，如下所示

例如，日期选择器值将类似于 2020 年 7 月 12 日星期日

var date = date.toLocaleString()

输出会像

07/12/2020, 12.00 am

然后像下面这样使用格式化

((dateoutputabove).replace(/,/g,''MM/DD/YYYY hh:mm:ss").format("YYYY-MM-DDThh:mm:ss")

将在选择器中为您提供正确的结果另请参阅

为什么 react-datepicker 没有选择正确的日期？

Why react-datepicker is not selecting correct date?

reactjs

react-datepicker