Get predictive Time-zones in DateTime Properties

casper.rasmussen/ April 23, 2016/ Content Types and Properties, DOJO, Episerver CMS/ 2 comments

Episerver is by default relying on a dijit/form/_DateTimeTextBox widget when representing the Date and Time picker appearing when DateTime properties are used as part of any PageType or BlockType property. By default, this widget adjusts its Date selection to the users Time-zone (e.g. GMT-4) defined by the browser. It makes it hard to show the actual date and time selected to the end users.

We recently ran into this issue. Editors had to select a Date and Time for the start of an Event. Because editors were selecting this in their local time-zone, derived via the browser, the platform presented a different date and time information. Reason is, that the javascript Date-object, in GMT-4, would automatically become UTC, without being converted. Be aware that the persisted timezone depends on the locale settings on the environment running Episerver.

We had two options.. We could adjust the timezone of our servers to match the timezone of the browser our editors were using. It was though, in this situation, not a solution due to the platform being globally used in a large international corporation.

Secondly, and the solution we ended up with, was to enforce the dijit/form/_DateTimeTextBox to select a Date and Time in UTC and thereby ignore the browser timezone.

It requires some minor code snippets, but can easily be added to any Episerver CMS and Episerver Commerce platform.
Below widget ensures that the date selected are being converted to UTC before handed over to Episerver and saved in our database.

Episerver has to be told when to use this widget. That can be done via a EditorDescriptor, that allows developers to mark any DateTime or DateTime? property with a UiHint called “UTC”.

Be aware that it is important that you register the path for any client side modules that are registered as widgets to “newsevents”.

<add name=”newsevents” path=”Static/NewsEvents/Dojo” />

Be aware that above snippets automatically converts dates and time to UTC. It means the widget expects that your environment runs Coordinated Universal Time. It would of course be possible to adjust above implementation slightly to utilize the EditorConfiguration, supported by Episerver, to indicate the timezone we want to convert to.

2 Comments

  1. You mention possible improvement to the above implementation to “utilize the EditorConfiguration, supported by Episerver, to indicate the timezone we want to convert to”
    How would we go about this? We have servers in different timezones and not in UTC.

    1. Hi there.

      Thanks for the question.
      Considering your server timezone is possible by passing in the target timezone as part of the EditorConfiguration[“..”] parameters in your UTCDateTimeEditorDescriptor implementation. By passing that information, you can then consider your server timezone during timezone conversions. My implementation is always converting to UTC, but if your web servers has been provisioned with a different timezone, then that adjustment is very much needed.

      Hope that additional detail helped.

      Casper Aagaard Rasmussen

Leave a Comment

Your email address will not be published. Required fields are marked *

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
*
*