reactjsreact-datepicker

Why react-datepicker is not selecting correct date?


I'm newbie in React and I have used this datepicker and used following code

    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}
      />
    );
  }
}

Definition of handlechange is given below

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

After this I have converted that date in format which I need in my program

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));

Sometimes it selects correct date. But most of the time it's returning this 01-01-0001 12:00:00 AM date & time which is default.

Due to that date, Exception which I usually gets is given below:

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

Can anyone help me in understanding where am I making mistake? Is there any bug in that react-datepicker? Please give me solution for this problem.


Solution

  • To format a date, moment is a good option.

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

    Demo