Telerik RadDatePicker control - DisplayDateFormat and Culture

This blog talks about RadDatePicker especially its behaviour, DisplayDateFormat format and relation with ASP.NET culture settings.

Telerik offers very good controls and RadDatePicker is one of them. RadDatePicker belong to group of controls dealing with Time, date, calendar, schedule, etc. These are RadDatePicker, RadTimePicker, and RadDateTimePicker. In this post we going to focus only on RadDatePicker. Using this control requires ScriptManager on page as it has to deal with AJAX. This control is useful to capture date from user and highly configurable. Configuration allows to control display format, input format, styling, validation and appearance. Like any other telerik control, this offers flexible client side API. One of the great feature is sharing calendar. Imagine a page where there are more than 10 RadDatePicker controls are rendering. This will result in too much HTML and JavaScript rendering on client side. To solve this problem, sharing calendar feature comes into picture. This allow sharing calendar among many Data Picker control making page light weight and improve performance.  Coming back to point, we are focusing on two properties DateInput.DisplayDateFormat and DateInput.Culture. DisplayDateFormat is actually property of DateInput sub-object of type RadDateInput. RadDateInput basically controls user input and so RadDateInput.DisplayDateFormat controls how to display post user input. DateInput.Culture is again property of same sub-object.  Culture can be set from code explicitly or can be defaulted from (ASP.NET Context) Thread.CurrentThread.CurrentUICulture. So if Culture not set then it is same as Thread.CurrentThread.CurrentUICulture

There is always confusion around this two properties in multi-lingual ASP.NET application. Consider a case where IIS Server Time Zone is set to US EST and client is in UK using this application. The system is built to display date in  US date format and user is entering date in UK date format. So after entering date, month and date does not display as expected. User trying to enter 01/12/2014 will display as 1/12/2014 which is Jan 12, 2014. User wanted 1^st Dec 2014.

Let us get into more details by looking at code and example. The ASP.NET application is designed to display date in specific format and it is set to ‘M/d/yyyy’ to RadDateInput.DisplayDateFormat throughout the application for each RadDatePicker. This means 1^st December 2014 will display as 12/01/2014 everywhere in system. User from UK is using this system so the DateInput.Culture is automatically set to en-US which has date format ‘M/d/yyyy’. This can be simulated by setting properties as show in code below

<telerik:RadDatePicker DateInput-DisplayDateFormat="M/d/yyyy" DateInput-Culture="en-US" ID="RadDatePicker1" runat="server"></telerik:RadDatePicker>

Now, entering 01/12/2014 will be interpreted as Jan 12, 2014. You may confirm by clicking on Calendar icon.

So what is best way? Culture property plays import part here. Date enter by user will be broken into 3 parts. Date, Month and Year. This will be taken as input to generate actual date value. In above case Culture is set to en-US and so the date format is ‘M/d/yyyy’. The inputs are January as month, 01 as Date and 2014 as year. This will be arranged as 1/12/2014 instead of 01 December 2014.

To work in synch with end user culture, set culture based on user locale. So in this case, user using system from UK should have Culture = en-GB. This way date will interpreted way user inputs. Display format can be anything, once date parts (day, month, year) are captured correct, it can be display in any format.

Enjoy!