1

I just started learning front-end technologies (React) and facing an issue with react date picker API.

Whenever I select a date from the UI, it displays correctly on the UI but when I bind the date to send it over to the server to save the record, it sends a previous date with a timestamp.

enter image description here

For example: If I select today's date i.e. 14 April 2022 from the UI, the actual date is bonded something like 13 April 2022T06:33:11.

dob: "2022-04-13T18:30:00.000Z"

I have tried to debug the issue but did find anything relevant, but when I console.log the date, it prints the same date as selected from the UI.

Here is the code that I implement for data picker.

import DatePicker from "react-datepicker";

const [dob, setDob] = useState("");

<DatePicker
  className="form-control" 
  minDate={new Date("1945/08/15")}
  maxDate={new Date()}
  selected={dob}
  onChange={(date) => setDob(date)}
  showMonthDropdown
  showYearDropdown
  dropdownMode="select"  

/>

What's wrong with my code?

James Z
  • 12,209
  • 10
  • 24
  • 44
Atul Rai
  • 332
  • 1
  • 10
  • 25
  • Did you check the Network tab on what data is being sent. It is possible that on server side you are deserialzing incorrectly to a different timezone or utc timezone. – Rahul Jujarey Apr 14 '22 at 10:23
  • Hi @RahulJujarey, yes I have checked the network tab, incorrect date is being sent from the front-end side. Even tried with adding locale property but still getting same error – Atul Rai Apr 14 '22 at 10:26
  • The date `dob: "2022-04-13T18:30:00.000Z"` is in UTC and it is same as `dob: "2022-04-14 00:00:00.000"` in IST. Please check the timezone of you application. You can convert it back to IST again and send to server. – nkkumawat Apr 14 '22 at 10:47
  • @nkkumawat: Alright but if I set the date format to MM/dd/yyyy then why its set dob along with timestamp? – Atul Rai Apr 15 '22 at 07:08
  • 1. I think it has something to do with day light savings. React-datepicker team should correct it through a new prop. 2. They should write little description with each prop. – Gohar ul Islam Oct 08 '22 at 15:05

0 Answers0