react-datepicker icon indicating copy to clipboard operation
react-datepicker copied to clipboard

the date selected is 25/05/2022 and it posts it to the database as 24/05/2022

Open ArtonRamadani opened this issue 2 years ago • 5 comments

Describe the bug When ever i select a date for example 02/06/2022 its all good in front end except that when i send it to the data base it is posted as 01/06/2022! in some other parts of the code it sends it with +1 value for example I have selected 02/06/2022 and it posted to the database as 01/06/2022

const used to post to db{ const [patientData, setPatientData] = useState({...some redux code...}); const [birthday, setBirthday] = useState();

const birthDate = (event) => { setPatientData({ ...patientData, birth_date: event }); setBirthday(event); }; . . . <DatePicker onChange={birthDate} selected={birthday} placeholderText= {"DD/MM/YYYY"} className="form-control patient-settings-date" dateFormat="dd/MM/yyyy" />

bugReport the console log of the birthDate event

and the post send to the DB postBug

ArtonRamadani avatar Jun 01 '22 07:06 ArtonRamadani

I have exactly the same problem. For a selected date of 2022/06/09, I got "2022-06-08T22:00:00.000Z"

BlueBird67 avatar Jun 01 '22 17:06 BlueBird67

That's because 2022-06-08T22:00:00.000Z is the same than 2022-07-08T00:00:00.000 GMT+0200 It's the very same date displayed with 2 differents timezone ....

JeandeCampredon avatar Jun 03 '22 08:06 JeandeCampredon

It's still false for me, I input 22/05/1975, and the result is : 1975-05-21T23:00:00.000Z For 20/11/2009, it's : 2009-11-19T23:00:00.000Z

Always 1 day less.

In the database, it's showing me 1 day less also.

BlueBird67 avatar Jun 04 '22 13:06 BlueBird67

I don't think it's a bug, but rather a limitation of the Date implementation of JavaScript. In JS you cannot make a Date without a Time; a Date object always contains both. A better name for the JS "Date" would be "DateTime". Because of that, you are always selecting a time when you are selecting a date as well.

A quick and dirty fix is to forcibly format the Date after selecting;

const toISOIgnoreTimezone = (inputDate) => {
    return inputDate.getFullYear() + "-" +  
      ("0" + (inputDate.getMonth()+1)).slice(-2) + "-" +
      ("0" + inputDate.getDate()).slice(-2) + "T00:00:00.000Z";
}

Req avatar Jul 04 '22 10:07 Req