Ignoring the timezone when setting the date in a date picker

[Murray]

In my application we display all dates in UTC regardless of user's timezone. We use angular reactive forms and will have our kendo date picker mapped to a formControlName - eg 'fiscalYearEnd'.

The value for fiscalYearEnd in my json is  eg '2025-07-09'.

If I then  populate this date field with this.form.get('fiscalYearEnd').setValue(new Date(json.fiscalYearEnd)) then if the user is in eg New York, ie EST timezone, then they will see 2025-07-08 as the value in the date picker.

I've also tried other approaches - eg 

this.form.get('fiscalYearEnd').setValue(new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())));

Whatever I try, if the timezone is EST the date picker will display the previous day.

What am I doing wrong?

 

 

 

[Martin Bechev]

Hello Murray,

This behavior is caused by how JavaScript's Date object interprets date strings and how the Kendo UI for Angular DatePicker displays dates based on the user's local timezone. When you use new Date('2025-07-09'), JavaScript treats this as midnight UTC, but when displayed, it converts the time to the user's local timezone. For users in timezones west of UTC (such as EST), this results in the date being shown as the previous day.

To ensure the DatePicker always displays the intended calendar date regardless of the user's timezone, you should construct the Date object using the year, month, and day parts directly. This makes the date "local" and prevents timezone shifting.

const dateStr = json.fiscalYearEnd; // e.g., '2025-07-09'
const [year, month, day] = dateStr.split('-').map(Number);
// Note: month is 0-based in JavaScript Date
const localDate = new Date(year, month - 1, day);
this.form.get('fiscalYearEnd').setValue(localDate);

This approach creates a date at midnight in the user's local timezone, so the DatePicker will show '2025-07-09' consistently, regardless of the user's location.

Utility Function (Optional)

If you need to apply this logic throughout your app, consider creating a utility function or a wrapper component to handle date conversions when reading from or writing to the DatePicker.

Example utility function:

function parseLocalDateFromISO(isoString: string): Date {
  const [year, month, day] = isoString.split('-').map(Number);
  return new Date(year, month - 1, day);
}

Check the following StackOverflow thread

https://stackoverflow.com/questions/30535691/remove-the-local-timezone-from-a-date-in-javascript

Tips:

• Always construct dates using year, month, and day parts when displaying with the Kendo DatePicker to avoid timezone issues.
• Avoid passing ISO strings directly to new Date() unless you want UTC interpretation.

Let us know in case of any questions.

Regards,

Martin Bechev
Progress Telerik