Hacker0x01 / react-datepicker

A simple and reusable datepicker component for React
https://reactdatepicker.com/
MIT License
8.09k stars 2.24k forks source link

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

Open ArtonRamadani opened 2 years ago

ArtonRamadani commented 2 years ago

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

BlueBird67 commented 2 years ago

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

JeandeCampredon commented 2 years ago

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 ....

BlueBird67 commented 2 years ago

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.

Req commented 2 years ago

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";
}
github-actions[bot] commented 4 months ago

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.