Displaying proper date format depending on culture

Question

I am using a control for a popup calendar date picker. This uses a javascript function, SetText, to set the textbox to the given date. I can't change anything in the calendar control itself but I can override the SetText function. The SetText javascript just takes the TextBox name and the date value in string format and sets the TextBox to the string.

The problem: I need to display the date in the format "April 30".

Easy to do. Use getMonth() and getDate() where I can parse the information from there.

Now, I need to make sure this shows correctly for different cultures. For example, the UK shows dates as "30 April". Since the code-behind(c#) could be sending the date in the UK format how do I know in the javascript that they're using UK(dd/mm/yyyy) and not US(mm/dd/yyyy)?
The browsers navigator language could be set to one setting while the server is set to another to cause a January 4 as April 1 mismatch.

Answer 1

The open-source JavaScript library Date.js has some great methods for formatting dates, as well as it supports a bunch of languages:

Date.js at Google Code: http://code.google.com/p/datejs/

If you want nicely formatted dates / times, you can just pass a formatting string (nearly identical to those used in .NET Framework) into any Date object's .toString() method.

It also has a whole set of cultures which allow you to simply include the appropriate script for that culture.

If you want to manage that yourself (as we do in our apps), you can find resources which give you the list of appropriate resource strings for a given culture. Here's one that shows proper formatting strings for a ton of cultures: http://www.transactor.com/misc/ranges.html

Answer 2

As you are using ASP.NET then you may also be using ASP.NET Ajax. If so, there are two properties on the ScriptManager that are of use to you:

EnableScriptLocalization - Gets or sets a value that indicates whether the ScriptManager control renders localized versions of script files.

EnableScriptGlobalization - Gets or sets a value that indicates whether the ScriptManager control renders script that supports parsing and formatting of culture-specific information.

<asp:ScriptManager ID="AjaxManager" runat="Server" EnablePartialRendering="true"
            EnableScriptGlobalization="true" EnableScriptLocalization="true" />

When you enable both of these (set to true) then ASP.NET Ajax extenders etc. should automatically be localised into the culture specified in web.config:

<configuration>
  <system.web>
    <globalization 
       fileEncoding="utf-8" 
       requestEncoding="utf-8" 
       responseEncoding="utf-8" 
       culture="en-GB" 
       uiCulture="en-GB" />  
  </system.web>
</configuration>

For instance, setting this will localise the AjaxControlToolkit Calendar into your specificed culture.

Even if you are NOT using ASP.NET Ajax adding a ScriptManager and enabling localisation will give you a useful javascript variable called __cultureInfo that contains a JSON array of localised formate, such as currencies, dates etc.

"CalendarType":1,"Eras":[1],"TwoDigitYearMax":2029,"IsReadOnly":true},"DateSeparator":"/","FirstDayOfWeek":1,"CalendarWeekRule":0,"FullDateTimePattern":"dd MMMM yyyy HH:mm:ss","LongDatePattern":"dd MMMM yyyy","LongTimePattern":"HH:mm:ss","MonthDayPattern":"dd MMMM","PMDesignator":"PM","RFC1123Pattern":"ffffd, dd MMM yyyy HH\u0027:\u0027mm\u0027:\u0027ss etc....

Answer 3

If you control the backend, why not just send a timestamp and push it into Date object?

As for formatting on the client side, since I was already using Dojo, I solved this problem by using dojo.date.locale.format. It was completely painless.

• Locale is detected automatically or can be set arbitrarily.
• Shorthand format options (e.g.: long short)
• Data selectors (e.g.: time, date)
• Ability to specify an arbitrary date/time pattern (probably not application to this application, but still useful).

Tutorial: http://docs.dojocampus.org/dojo/date/locale
API doc: http://api.dojotoolkit.org/jsdoc/1.3/dojo.date.locale.format
Date format descriptions: http://www.unicode.org/reports/tr35/tr35-4.html#Date_Format_Patterns

Answer 4

toLocaleDateString would be a better solution than toLocaleString for your problem as it doesn't include the time (as you only are requesting the date).

Answer 5

See toLocaleString and related functions.

Answer 6

Three things you could use:

1) toLocaleString - As suggested already. The problem with this is when sending a string of "4/1/2009" this can result in a couple things. January 4 or April 1.

2) navigator.language and navigator.systemLanguage - After you get the date string you can check to see what language the system is in and parse the date from there. The problem with this and solution 1 is what if you have a UK server and the browsers machine is US. You will have the code behind sending April 1 as 1/4/2009 where the javascript will read the string as whatever language the clients browsers is. So, UK server and US browser will give you a wrong result.

3) Use Code Behinds Culture - Create a variable in your javascript that when the page loads, it will call a function in your code behind that returns this.Page.Culture from there, you will know what culture the string is being sent back as. This will eliminate the mismatch that the first two solutions can cause. It will take a little extra work to make sure it's displayed correctly but at least you will be able to use the string without having the possibility of mismatching cultures.