Sitecore Date Time picker with time zone

Dealing with date, time and time zones are really quite simple, but developers tend to screw things up over and over again make a huge mess of it. There are just a few things to keep in mind, and you’re good to go.

Update: I’ve now posted some code on github that can be used to make this Sitecore field: Sitecore.DateTimeZoneField

First, DateTime should always be stored and treated in UTC format. Always. There are no exceptions. Period.

Time zone adjustment should be done during rendering. A time zone is just presentation, right. The occurrence of an event is always the same all around the world. It’s just the display of your dial that differs. Remember how Swatch .beat tried to get rid of time zones back in the days?

As above, we treat date and time as UTC in Sitecore as well. Sitecore is a great CMS, but I’m missing the UI functionality for handling time zones. From a content author perspective, it’s not very convenient to always enter date and time as UTC. Just imagine scheduling something in the CMS targeting a specific market. You’ll not just have to know the time zone for that market. You’ll have to know whether daylight saving applies as well. Less complicated things will give content authors a headache.

Luckily we can customize Sitecore to deal with this, at least partially.

My idea is to display a time zone next to each date time, enabling content authors to enter a date time in any time zone they like and just select what time zone it applies to. When saving the data, it’s converted into UTC according to the selected time zone.

So, I’ve created a prototype of a new custom DateTimeZone field that basically implements the same code as the built in Sitecore.Shell.Applications.ContentEditor.DateTime class, but it adds a drop down with time zones.

The images below shows the standard Sitecore sample item having an additional default DateTime field and a customized DateTimeZone field. The two fields contains the same date and time as seen in the right hand raw value screenshot. The left hand screen shoot the time is converted to current user profile time zone. Note that it compensates for daylight saving as well according to the selected date, i.e. it does not depend on whether we have daylight saving today.

DateTime with time zone

DateTime field converted to selected time zone including daylight saving as well, i.e. one hour for the time zone and one hour for summer time.

DateTime with time zone

Raw values showing what’s stored in Sitecore

Digging into the code of the built in Sitecore DateTime class, it contains a DateTimePicker control and uses a RealValue property. In this prototype, I’ve kept the UTC data in the existing RealValue property, and I convert it back and forth to local time when reading/setting the picker.Value.

User profile with time zone

To further more make this convenient for content authors; I’ve added a custom user profile field to store a default time zone, so that each author can use their preferred time zone as default.

In addition to the DateTimePicker, I’ve added a regular Combobox control with a list of time zones taken from TimeZoneInfo.GetSystemTimeZones(). I use the TimeZoneInfo.Id property as value of the list items making it easy comparable with the user profile. As you know from the Sitecore API Cookbook, we can add a user profiles field for storing default time zone by adding an item in the core database at /sitecore/templates/system/security/user/data

To make things a little easier, ensure your servers run in UTC as well, so that you don’t have to boggle with inconsistent log files, buggy third party libraries etc.

I hope Sitecore will implement this in the core product in the near future, so we can leverage from this in built in dialog boxes as well, such as the Publish Restrictions dialog etc.

13 thoughts on “Sitecore Date Time picker with time zone

    • Well, this is very much a prototype so I don’t see it as Marketplace ready. Besides, since I haven’t changed the built in time UI’s in Sitecore, it’s not production ready either. Mixing UTC and local time zone would be even more confusing for content authors. But I’m happy to share the code if you find a use for it. I hope Sitecore implements this properly into the core product.

    • Thanks Thomas! Yeah, and let’s implement a Stardate calendar as well! 🙂

  1. Pingback: Create a custom control in Sitecore: DateTime with TimeZone | Visions In Code

  2. Pingback: A List of Custom Fields for Sitecore | Sitecore.Context.Item

Comments are closed.