Timezone Behavior in DatePicker Control

30 Aug 20252 minutes to read

The DatePicker component displays and maintains the selected date value based on the client system’s current time zone. When a user selects a value, it is stored and rendered using the local time zone of the system at the time of selection. This ensures that the value remains consistent and predictable during user interaction.

NOTE

if the system time zone is changed dynamically after a value is selected, the DatePicker will not update or shift the selected value. The component preserves the original selection, ensuring a stable and reliable user experience.

serverTimezoneOffset

The serverTimezoneOffset property allows you to specify the server’s time zone offset from UTC in hours or fractional hours. This is useful when binding values from the server to ensure they are interpreted correctly on the client side.

• The value should be a number representing the offset from UTC.
• Examples:
  • -5 → UTC-5 (Eastern Standard Time)
  • -4.5 → UTC-4:30 (Afghanistan Time)
  • 5.5 → UTC+5:30 (India Standard Time)

NOTE

The serverTimezoneOffset property is applicable only for pre-bound values (i.e., values set during initialization or data binding). It does not affect values selected by the user during runtime.

The following example illustrates the output in your browser

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars'




import { Component } from '@angular/core';

@Component({
imports: [
        
        DatePickerModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<ejs-datepicker placeholder='Enter date'  [serverTimezoneOffset]="serverOffset">></ejs-datepicker>`
})
export class AppComponent {
    public serverOffset: number = 5.5; // Example: UTC+5:30 for IST
    constructor() {
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));