Timezone Behavior in DateTimePicker Control

3 Sep 20253 minutes to read

The DateTimePicker component displays and maintains the selected date and time 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 DateTimePicker 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 below examples shows the basic DateTimePicker component.

[Class-component]

app.jsx

// import the datetimepickercomponent
import { DateTimePickerComponent } 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 <DateTimePickerComponent id="datetimepicker" placeholder="Select a date and time" serverTimezoneOffset={5.5}/>;
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

app.tsx

// import the datetimepickercomponent
import { DateTimePickerComponent } 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 <DateTimePickerComponent id="datetimepicker" placeholder="Select a date and time" serverTimezoneOffset={5.5}/>;
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

app.jsx

// import the datetimepickercomponent
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    return <DateTimePickerComponent id="datetimepicker" placeholder="Select a date and time" value={new Date()} serverTimezoneOffset={5.5}/>;
}
ReactDOM.render(<App />, document.getElementById('element'));

app.tsx

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

function App() {
    return <DateTimePickerComponent id="datetimepicker" placeholder="Select a date and time" value={new Date()} serverTimezoneOffset={5.5}/>;
}
ReactDOM.render(<App />, document.getElementById('element'));