1. Home
  2. Forum
  3. ASP.NET MVC
  4. DatePicker Control Not Displaying Local Date as Expected on Browsers in Different Time Zones

DatePicker Control Not Displaying Local Date as Expected on Browsers in Different Time Zones

I have a DatePicker control that is being assigned a DateTime value from the Model. This DateTime is treated as a Local date and has a DateTime.Kind of "Local" assigned to it. That is, I expect this DatePicker to show the same selected date value for all users regardless of the time zone that their web browser is in. I do not care about the time zone associated with this value, only the date.

So, for example,
The web server is located in the Central Time Zone (offset of -0600). My machine and web browser are also located in the Central Time Zone (offset of -0600). A different user's machine and web browser are located in the Pacific Time Zone (offset of -0800). If the DatePicker is assigned a DateTime value of this, "2017-12-01 00:00:00.0000000", with a DateTime.Kind of "Local", the display for me in the DatePicker will be "12/1/2017" and the actual value from the browser's developer tools will be "2017-12-01T06:00:00.000Z". But, the other user's display in the DatePicker will show "11/30/2017" and have the same actual value from the browser's developer tools of "2017-12-01T06:00:00.000Z".

How do I make it so that this DatePicker shows the same value to both users? I do not care about the user's timezone. There will be no arithmetic on this date. I only care about the local date.

5 Replies
BC Berly Christopher Syncfusion Team February 13, 2018 02:03 PM UTC

Hi Jason, 
  
Thanks for contacting Syncfusion support.  
  
We have looked into your query “DatePicker Control Not Displaying Local Date as Expected on Browsers in Different Time Zones” when the client and the server are at different time zones. This issue occurs, because the value being selected at the client end will be converted to equivalent UTC value which is done to overcome time zone discrepancies across the world.       
To get rid of this issue, the value of DatePicker should be updated based on server and client time zone excluding the time zone differences as shown in the below code example.  
[index.cshtml] 
@Html.EJ().DatePicker("dateValue").Value(Model.dateValue).ClientSideEvents(s => s.Create("DateUpdate")) 
<script> 
    function DateUpdate() { 
    if (this.model.value != null) { 
        var serverTimeZoneDiff = -6.0; // Timezone offset of server (UTC -6:00) // Central America  
        var clientTimeZoneDiff = new Date().getTimezoneOffset() / 60; // client Time zone offset in hours    
        ej.serverTimezoneOffset = serverTimeZoneDiff + clientTimeZoneDiff;// total time zone offset    
    }         
    } 
</script> 
 
 
 
In the above code example, the time zone difference between the client and server time zone values are added with the value of the DatePicker control to update the value excluding the time zone conversion at the client end. Please ensure that the value of the serverTimeZoneDiff should be set manually (Time zone value of the server in hours, here UTC -6.0 time zone difference is used at sample level).         
  
For your convenience, we have prepared a sample based on your requirement. Please get the sample from the below location.   
  
 
Regards, 
Berly B.C 


JN Jason Nichols February 13, 2018 04:32 PM UTC

Thanks for the assistance, but unfortunately, that did not seem to resolve my issue.
I even hosted the example that you provided. In it, a value of "12/1/2017" is being assigned to the DatePicker. I would expect myself (-0600 offset of client) to see "12/1/2017" on the website and also the other user (-0800 offset of client) to see "12/1/2017" with this solution. I do see "12/1/2017" but the other user is still seeing "11/30/2017". I have used both Internet Explorer and Edge web browsers.
I have debugged the javascript, as has the other user, and the "ej.serverTimezoneOffset" at least seems to be getting set appropriately. But, it is as if that variable's value is not being honored in the calculation of the display.
I even tried setting the "ej.serverTimezoneOffset" to an arbitrary offset (like 2, -2, 18, -18) expecting to see some change in the display but did not see any change.

PK Prem Kumar Madhan Raj Syncfusion Team February 19, 2018 12:51 PM UTC

Hi Jason, 

Sorry for the inconvenience. 

We have checked with your query that the solution is not working at your end with different time zone with Edge and Internet Explorer browsers and updated our solution with cross browser support such that the solution works fine in all the browsers. Please check the below code snippet for the updated solution below. 

@Html.EJ().DatePicker("dateValue").Value(Model.dateValue) 
 
<script> 
        var serverTimeZoneDiff = -6.0; // Timezone offset of server (UTC -6:00) // Central America 
        var clientTimeZoneDiff = new Date().getTimezoneOffset() / 60; // client Time zone offset in hours 
        ej.serverTimezoneOffset = serverTimeZoneDiff + clientTimeZoneDiff;// total time zone offset 
</script> 

For your convenience, we have created a simple sample based on your requirement and attached the updated sample in the below link. Please check it. 



If this issue still persist, then please revert to us with more information so that we can provide the exact solution for your requirement. 


Regards, 

Prem Kumar M

PB Philip Bradley December 9, 2020 11:11 AM UTC

We are having a similar problem with this component in a project--i.e, passing a specific date value to the date picker and having it nonetheless occasionally display a day before or after, depending on the user's time zone.

Yes, there may be a convoluted workaround possible, but can you please take a deep breath and think about how broken that is.

This is a DATE picker.  A DATE consists of a year, month and day.  It is timezone agnostic.  Yet this component insists on factoring a timezone into its presentation of the DATE.  

This is a broken component.  Our team has finally made a decision to use a non syncfusion date picker (which we would rather not do) because of this ridiculousness.

In what world would we want a date that we are passing to a date picker to vary based on timezone?  I'm struggling to think of even one use case.  I might set defaults, the first of the month, last of the month, next monday, last day of the month, whatever--in every single case I don't want the date picker to shift my value.  

Broken.

MK Muthukrishnan Kandasamy Syncfusion Team December 10, 2020 11:43 AM UTC

 
Hi Philip, 
 
Good day to you. 
 
We have validated your requirement in EJ DatePicker control, the date and time was updated based on the client time zone. If you want to show the same date which is stored on the database, you can set TimeZone property as false to achieve your requirement. Please refer to the below code block. 
 
@Html.EJ().DatePicker("datepick").TimeZone(false) 
 
Note: If you are using the old version, we request you to update to Essential Studio version 16.1.32 or later where you can overcome this to restrict the date value conversion based on the client time zone by using the time zone API available for the DatePicker component. 
 
Please refer to the below release notes link for further details.    
   
 
 
 
 
Please refer to the below forums the similar problem discussed. 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 


Loader.
Up arrow icon