DateTime picker showing wrong time format when submitting data to server

Backend
1

I’m working with a date time picker component and having timezone issues when sending data to my API.

When I pick a date like “2025-05-04 15:30” in my picker, the console shows the right format:

Sun May 04 2025 15:30:00 GMT+0200 (Central European Summer Time)

But when I check the network requests, the time gets converted and shows up as:

begin_date: "2025-04-05T13:30:00.000Z"

There’s a 2 hour difference between what I selected and what gets sent. How do I make sure the original time value gets transmitted without timezone conversion?

const [beginDate, setBeginDate] = useState<DateValue | null>(new Date(schedule_data.begin_date));

const submitSchedule = async () => {
  if(beginDate && finishDate) {
    let scheduleEntries: TScheduleEntry[] = employees.map((employee) => {
      return ({
        employee_id: employee.id,
        begin_date: beginDate,
        finish_date: finishDate,
        project_id,
        active: true,
      })
    });
    
    await createSchedule(scheduleEntries);
  }
};

<DateTimePicker 
  className="mx-4" 
  defaultValue={beginDate} 
  clearable 
  placeholder="Select start time" 
  onChange={(value) => setBeginDate(value)} 
/>
2

JavaScript Date objects get converted to UTC when they’re turned into JSON. Your picker creates a local Date object, but it gets changed to UTC when you submit it. To keep the selected time as-is, format the date first before sending. Try beginDate.toISOString().slice(0, 19) to grab the local time without timezone stuff, or use date-fns to format it as yyyy-MM-dd HH:mm:ss. You could also just set your datetime picker to work in UTC from the beginning.

3

Yeah, timezone stuff is annoying! Dates get processed as UTC, so they shift around. Best fix is handling it server-side to match user timezones, or just format the date upfront with beginDate.toLocaleString('sv-SE') - gives you a clean YYYY-MM-DD HH:MM:SS format!

4

Hmm, interesting - are you storing dates in UTC on your backend? Sometimes the issue comes from mixing local time on the frontend with UTC storage. What timezone does your server expect to receive? Also, which datetime picker library are you using? Some have built-in timezone handling that might solve this.