Timezone Behavior in DatePicker Control

21 Feb 20264 minutes to read

The DatePicker component displays and maintains date values based on the client system’s local time zone. When a user selects a date, it is stored using the system’s time zone at the time of selection, ensuring consistent and predictable behavior.

Important: If the system time zone changes after a date is selected, the DatePicker does not automatically update the displayed value. The component preserves the original selection, maintaining a stable user experience.

serverTimezoneOffset

The serverTimezoneOffset property specifies the server’s time zone offset from UTC in hours or fractional hours, enabling correct interpretation of server-provided date values on the client.

Scenario	UTC Offset	Example
Eastern Standard Time	-5	serverTimezoneOffset={-5}
Fractional offset	-4.5	serverTimezoneOffset={-4.5} (UTC-4:30)
India Standard Time	5.5	serverTimezoneOffset={5.5} (UTC+5:30)

Scope: The serverTimezoneOffset property applies only to pre-bound values during initialization or data binding. It does not affect dates selected by the user during runtime or dates entered directly in the input field.

Edge Cases & Considerations

• Daylight Saving Time (DST): The component uses the system’s DST information; no manual DST adjustment is required. However, when migrating across DST boundaries, ensure server times are correctly UTC-adjusted.
• UTC±0 (GMT/UTC): Specify serverTimezoneOffset={0} when the server operates in UTC.
• Dynamic timezone changes: System time zone changes after date selection do not affect already-selected values; users must re-select dates to reflect the new time zone.

The following examples demonstrate DatePicker timezone handling:

[Class-component]

app.jsx

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    render() {
        return <DatePickerComponent id="datepicker" placeholder="Enter date" value= {new Date()} serverTimezoneOffset={5.5}/>;
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

app.tsx

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {
    public render() {
        return <DatePickerComponent id="datepicker" placeholder="Enter date" value={new Date()} serverTimezoneOffset={5.5}/>;
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

app.jsx

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    return <DatePickerComponent id="datepicker" placeholder="Enter date" value={new Date()} serverTimezoneOffset={5.5} />;
}
ReactDOM.render(<App />, document.getElementById('element'));

app.tsx

// import the datepickercomponent
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App(){
    return <DatePickerComponent id="datepicker" placeholder="Enter date" value={new Date()} serverTimezoneOffset={5.5}/>;
}
ReactDOM.render(<App />, document.getElementById('element'));