Timezone Behavior in DatePicker Control

3 Sep 20253 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 demonstrates the DatePicker timezone behavior

var ej = require('@syncfusion/ej2-calendars');

var datepicker = new ej.DatePicker({
    value: new Date(),
    placeholder: "Select Date",
    width: "250px",
    serverTimezoneOffset: 5.5 // Example: UTC+5:30 for ISTyyy
});

// Append the DatePicker to the DOM element with ID 'datepicker'
datepicker.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DatePicker control</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-calendars/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body style="margin-top: 100px;">
    <div id='container'>
        <input id='element' type="text" />
    </div>
</body>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>