We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

DateTimePicker and TimeZoneOffsets

How do I disable the timezone conversions?  I don't need nor want the time to be altered in anyway.  I simple wish to record what was entered and display what was recorded.  Currently, if the user is in a different timezone than the server, this does not work and makes the control useless.  I cannot find any way to turn this aspect off.

16 Replies

SP Sureshkumar P Syncfusion Team April 17, 2017 12:47 PM UTC

Hi Shawn,  
 Thanks for contacting Syncfusion Support. 
We have checked your Query. We suspect that date value does not updated properly after post back due to persistence of previous time zone. So, please clear the cache as mentioned in the below code example to update the browser time zone with System time zone.  
  
[aspx.cs]  
  
protected void Page_Load(object sender, EventArgs e) {  
   if(IsPostBack) {  
      System.Globalization.CultureInfo.CurrentCulture.ClearCachedData(); //clear the cache  
      TimeZone localZone = TimeZone.CurrentTimeZone; //Newly selected system time zone will be updated after clearing the cache  
   }  
}  
  
Please get back to us if you need further assistance.  
  
Regards,  
Sureshkumar P. 



UN Unknown replied to Sureshkumar P September 6, 2017 03:39 AM UTC

Hi Shawn,  
 Thanks for contacting Syncfusion Support. 
We have checked your Query. We suspect that date value does not updated properly after post back due to persistence of previous time zone. So, please clear the cache as mentioned in the below code example to update the browser time zone with System time zone.  
  
[aspx.cs]  
  
protected void Page_Load(object sender, EventArgs e) {  
   if(IsPostBack) {  
      System.Globalization.CultureInfo.CurrentCulture.ClearCachedData(); //clear the cache  
      TimeZone localZone = TimeZone.CurrentTimeZone; //Newly selected system time zone will be updated after clearing the cache  
   }  
}  
  
Please get back to us if you need further assistance.  
  
Regards,  
Sureshkumar P. 


I want the same thing as Shawn and I don't believe that your answer actually works. I don't want the DateTimePicker to do ANYTHING with time zone conversions. Just raw values. 


If the user selects 9/9/2017 12:30 PM, I want to enter 9/9/2017 12:30 PM into my database. 

I am perfectly fine with raw text. Is this possible?



SP Sureshkumar P Syncfusion Team September 11, 2017 12:48 PM UTC

Hi Shawn 
  
Thanks for your patience, 
 
We have analyzed your issue (“DateTime value has been changed after changing the timeZone while postback”). We have recommended that while you have storing the DateTimeValue into your database please convert and store the value (object) into UTC format that will avoid the issue in different time zone and time value problems in your applications. Please refer the code example. 
 
[sample.aspx.cs] 
 
//dateTime is the ID of the DateTimePicker 
var val = dateTime.Value.Value.ToUniversalTime();  
//convert  dateTime value (object) into UTC 
  
Regards,  
Sureshkumar P. 



UN Unknown September 12, 2017 08:06 PM UTC

I tried the solution and ultimately I still have the same problem.

Changing the value to UTC is useless if the value is not what I wanted in the first place.

The DateTimePicker is modifying its value before I am ever able to interact with it from code behind. So in this case, I am picking 9/12/2017 1:00 PM. When I click my "submit" button, the value of the DateTimePicker changes itself to 9/12/2017 4:00 PM. When I do dateTimePicker.Value in C#, I get 9/12/2017 4:00 PM, not 9/12/2017 1:00 PM like I want. I don't understand why the control is adding 3 hours. I am in UTC -4 right now. The server is in UTC -6. That's a 2 hour difference between the server and me and a 4 hour difference between UTC and me. I have no clue why 3 hours is being used.

The Grid control acts the way when saving. Actually, the Grid adds 7 hours.

Here is some testing I did:

My laptop's timezone: America/New York (UTC -5). Right now it is UTC -4 due to daylight savings time.
GoDaddy Shared Hosing Timezone for MySQL AND ASP.NET: MST (Mountain Standard Time. UTC -7. Right now it is UTC -6 due to Daylight savings time)
GoDaddy Shared Hosting Timezone for PHP: UTC



DateTimePicker testing:
------------------------
Selected: 9/6/2017 1:00 PM
After Partial Postback (update panel): 9/6/2017 4:00 PM.

"submit" button pressed and uploaded to MySQL:
Inserted into MySQL: 2017-09-06 16:00:00 - same as 4:00 PM


Grid:
------------------------
Shows: 9/6/2017 7:00 PM

(double click to edit)

DateTimePicker field before Save Button: 9/6/2017 7:00 PM
Inserted into MySQL: 2017-09-06 23:00:00 - this is 11 PM

Value in Grid after it refreshes: 9/7/2017 2:00 AM - 7 hours later.






SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team September 13, 2017 11:40 AM UTC

Hi Shawn, 
 
we have created a support incident to track the status of this forum has been created under your account. Please log on to our support website to check for further updates  
  
  
Regards,  
Sureshkumar P 



MS Manuel S December 19, 2017 05:19 PM UTC

I am experiencing the same problem. Is this now fixed?

ToUniversalTime() does not help and I would also prefer that I could somehow disable the tz conversion for displaying simply the datetime as it is.

Thanks


PK Prem Kumar Madhan Raj Syncfusion Team December 20, 2017 12:44 PM UTC

Hi Manuel,   
      
Thanks for contacting Syncfusion support.      
      
We have looked into your query “selected date time value changes with respect to time zone values” 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 date time value in the DateTimePicker should be updated based on server and client time zone. Here, we have updated the date time value of component in popup close and create event in the below code snippet. Please check it.   
      
      
      <ej:DateTimePicker ID="dateTime" runat="server" Width="180px"ClientSideOnClose="DateTimeUpdate" ClientSideOnCreate="DateTimeUpdate" ></ej:DateTimePicker>   
   
     <ej:Button ID="ButtonNormal" runat="server" Size="Large"OnClick="ButtonNormal_Click"  ShowRoundedCorner="true" Text="Post"></ej:Button>      
<script>      
      
    function DateTimeUpdate(args) {             
            var serverTimeZoneDiff = +5.5; // Timezone offset with UTC(+5.5 for IST)      
            var clientTimeZoneDiff = new Date().getTimezoneOffset()/60; // client Time zone offset in hours      
            var TimezoneOffset = serverTimeZoneDiff + clientTimeZoneDiff;// total time zone offset      
            this.model.value = new Date(new Date(this.model.value).getTime() + (TimezoneOffset * 60 * 60 * 1000));// updates DateTimePicker value.      
            this._updateDateTime();// updating DateTimePicker after value change.       
    }       
</script>      
      
      
In the above code snippet, the time zone difference between the client and server time zone values are added with the value of the DateTimePicker control to update the value in required time zone. Please ensure that the value of the serverTimeZoneDiff should be set manually (Time zone value of the server in hours, here IST time zone difference is used at sample level).      
      
For your convenience, we have created a sample based on your requirement, please check it.      
      
      
If still the issue persists, please revert with more information along with an issue reproducing sample so that we can provide exact solution for your requirement. 
   
      
Regards, 
Prem Kumar. M 


MS Manuel S February 1, 2018 01:42 PM UTC

Hi,

I am sorry guys but this did not help. :(

The main Problem is that the date is improperly displayed.

So for example if I set the value of the control in the server side page load Event to let's say with a value which has as datetime "01.02.2018 10:00" then the control will display "01.02.2018 11:00".

Time Zone is GMT+1. As soon as I populate the control with the a value.Subtract(New TimeSpan(1, 0, 0)) it displays the correct time...

Thanks,
Manuel



PK Prem Kumar Madhan Raj Syncfusion Team February 2, 2018 02:51 PM UTC

Hi Michael, 

Sorry for the inconvenience. 

We have checked with your query that “that the date is improperly displayed”. We suspect that the issue may be caused because of not specifying the serverTimeZone value properly in the sample or due to daylightsaving issue. So, we have updated the code to fix the case for daylightsaving as shown in the below code snippet. 

  <script> 
        function create(e){ 
            var serverTimeZoneDiff = +5.5; // Timezone offset with UTC(+5.5 for IST)    
            var clientTimeZoneDiff = new Date().getTimezoneOffset() / 60; // client Time zone offset in hours       
            var TimezoneOffset = serverTimeZoneDiff + clientTimeZoneDiff;// total time zone offset   
            if (isDST(e)) TimezoneOffset = TimezoneOffset - 1;// subracts one hour if daylightsaving enabled.  
            this.model.value = new Date(new Date(this.model.value).getTime() + (TimezoneOffset * 60 * 60 * 1000));// updates DateTimePicker value.       
            this._updateDateTime();// updating DateTimePicker after value change.        
        } 
        function isDST(e) { 
            return e.model.value.getTimezoneOffset() < Math.max(new Date(e.model.value.getFullYear(), 0, 1).getTimezoneOffset(), new Date(e.model.value.getFullYear(), 6, 1).getTimezoneOffset()); 
        } 
    </script> 

In the above code snippet, the time zone difference between the client and server time zone values are added with the value of the DateTimePicker control to update the value in required time zone. Please ensure that the value of the serverTimeZoneDiff should be set manually (Time zone value of the server in hours, here IST time zone difference is used at sample level). Also, additionally we have considered the daylight saving and updated the model value. 
 
If still the issue persists, then please get back to us with an issue reproducing sample such that we can provide an exact solution for your requirement. 
 
Regards, 
 
Prem Kumar. M  



MS Manuel S February 8, 2018 10:15 AM UTC

Hi,

this drives me crazy. Copied your JS Function and Named it "DateTimeUpdate". Two controls on the Form:

<ej:datetimepicker id="dtpOne" runat="server" watermarktext="Select..." width="200px" ClientSideOnCreate="DateTimeUpdate">

<DateTimePickerDrillDown ShowMeridian="False"></DateTimePickerDrillDown>

</ej:datetimepicker>

<ej:datetimepicker id="dtpTwo" runat="server" watermarktext="Select..." width="200px" ClientSideOnCreate="DateTimeUpdate">

<DateTimePickerDrillDown ShowMeridian="False"></DateTimePickerDrillDown>

</ej:datetimepicker>

Code behind in Page Load reads:

dtpOne.Value = mynullabledatefromdb.Value ' eq. 2018/01/08 10:00

dtpTwo.Value = Now ' eq. 2018/01/08 11:01

Setting "serverTimeZoneDiff = +0" will result in displaying dtpOne 10:00 and dtpTwo 10:01.
Setting "serverTimeZoneDiff = +1" will result in displaying dtpOne 11:00 and dtpTwo 11:01.

Any hint?

Thanks,
Manuel



AP Aditi Patre February 9, 2018 07:25 AM UTC

Even I'm facing the same issue as Shawn, server time zone is UTC +0.0. When I fetch datetime from database, I want it to be displayed as it is, also when user selects particular date & time, whatever is selected, should get saved in database as it is. Isn't there something like global?

If I use DateTimeUpdate() function (defined in the below trail) then it may display the time correctly but while updating, it will apply the conversion & won't save it correctly.


PK Prem Kumar Madhan Raj Syncfusion Team February 9, 2018 02:08 PM UTC

Hi Manuel,  
 
Query1: DateTimePicker value changes with different serverTimeZoneDiff values. 
 
Answer: From the code snippet shared, the value of only first DateTimePicker gets value form the server in the page load function and value of another DateTimePicker is assigned from the client end. The solution provided in the previous update is for values obtained from the server which is in different time zone of the client time zone.  
 
In the sample only one DateTimePicker accepts the value from the server (with server timezone UTC +0), and updates the value correctly when serverTimeZoneOffset value is set as 0 but the other DateTimePicker value which is assigned from the client end is also updated with time zone differences which is not required for second DateTimePicker, and so the value is updated wrongly in it. So, we suggest you implement the solution to the DateTimePicker that obtains value from the server alone. 
 
Query 2: If I use DateTimeUpdate() function (defined in the below trail) then it may display the time correctly but while updating, it will apply the conversion & won't save it correctly. 

Answer: To update the values while updating or changing the values of the DateTimePicker, please make use of the same function in the client side change event so that values will be updated in the server TimeZone each the value is updated or changed in the DateTimePicker. 


Regards, 

Prem Kumar. M 



MS Manuel S February 17, 2018 10:42 AM UTC

Hi,

both values are populated solely in the code behind:

If Not Page.IsPostback Then

  dtpOne.Value = mynullabledatefromdb.Value ' eq. 2018/01/08 10:00

  dtpTwo.Value = DateTime.Now ' eq. 2018/01/08 11:01

End If

Setting "serverTimeZoneDiff = +0" in the JS will result in displaying dtpOne 10:00 and dtpTwo 10:01 on the page.
Setting "serverTimeZoneDiff = +1" in the JS will result in displaying dtpOne 11:00 and dtpTwo 11:01 on the page.

When posting back the displayed values and control values are the same.

I do not understand why the behaviour is different when populating the datetime from a db value and setting a current datetime...

Thanks,
Manuel




PK Prem Kumar Madhan Raj Syncfusion Team February 19, 2018 11:30 AM UTC

Hi Manuel,   
  
We have looked into your query that “DatePicker value changes while populating the datetime from the DB and setting current datetime”. This is because in JavaScript, by default while processing a datetime value(DateTimeObject) from a server, value will be changed based on client time zone at the client end when client and server are at different time zones. We have provided a solution in the previous updates to update the correct value in the DatePicker without time zone effect by updating value with server and client time zone offset values while accessing value from a database. So, please make use of the previously updated solution to get rid of the time zone related issue while accessing datetime value from the database.    
  
Please check the below link for more information regarding time zone issues while accessing the datetime from a server.   
  

Regards,   

Prem Kumar. M



JC Jill Chang November 7, 2018 06:01 PM UTC

I am having the same issue and the datepicker is inside my ejGrid so I have no access to it. Can you provide a solution for it? I just want whatever user typein for the LaborDate. Thanks!

$("#detailGrid").ejGrid({
            dataSource : ej.DataManager({
                url : ...,
                batchUrl : updateUrl,
                adaptor : "UrlAdaptor"
            }),
            editSettings: {
                allowEditing: true,
                allowAdding: true,
                allowDeleting: true,
                editMode: ej.Grid.EditMode.Batch
            },
            columns: [
                ...
                { field: "LaborDate", headerText: "Labor Date", defaultValue: "", editType:ej.Grid.EditingType.DatePicker, format:"{0:MM/dd/yyyy}", width: "15%"},
            ],
            
        });




DL Deepa Loganathan Syncfusion Team November 12, 2018 10:13 AM UTC

Hi Manuel, 
 
 
From the previous update, we have noticed that you have faced TimeZone problem when client and Server were in different Time zones. To overcome this problem, we suggest you use the following below solution in the KB. 
 
 
 
 
 
 
After following the above solution, if you are still facing the issue, please share us the following details.  


 
  1. Share the full grid rendering code
  2. Share the exact scenario of the issue your facing.
  3. Share the screenshot of script error in console window, if any.
  4. Share the video demonstration of the reported issue, if possible.
  5. Are you facing the issue only when the Datepicker control in Grid?
 
The requested information will be helpful for us to validate your query to provide solution.  
 
 
Kindly let us know if you have any queries.  
 
 
Regards, 
  
Deepa L. 
  


Loader.
Live Chat Icon For mobile
Up arrow icon