Globalization: Calendars and DateTime text field formatting with ASP.Net MVC and Twitter bootstrap

Hackered
Thursday, February 12, 2015
by Sean McAlinden

Dates have always been a pain point on global applications, however it has definitely become a little easier over the last few years thanks to some great libraries.

In this post I am going to demonstrate how to hook up the Twitter bootstrap calendar and have it display correctly depending on the Thread.CurrentUICulture of an ASP.Net MVC application.

The following is a picture of the Twitter bootstrap calendar when my applications Thread.CurrentUICulture is set to "de" (German).

twitter bootstrap calendar german

You will also notice the textbox is using the German short date format.

NOTE: Ensure you have read my post on Globalization: Model binding DateTimes with ASP.Net MVC, otherwise you will find the default model binder starts throwing exceptions, this is because the default model binder cannot handle globalized DateTimes.

Install Twitter Bootstrap DatePicker

Ensure you have the twitter bootstrap javascript and css installed.

Also ensure you have the bootstrap datepicker javascript and css installed, including the locales scripts. There is plenty of useful information at http://bootstrap-datepicker.readthedocs.org/en/release.

For the purpose of this tutorial, ensure you install the following scripts:

jquery-{version}.js
bootstrap.js
bootstrap-datepicker.js
locales/bootstrap-datepicker.de.js

bootstrap.css
datepicker.css
 

Add the HTML

@{
    var datePattern = Thread.CurrentThread.CurrentUICulture.DateTimeFormat.ShortDatePattern;
}
<input type="text" name="MyDate" value="@Model.MyDate.ToString(datePattern)" class="datepicker" autocomplete="off" />

I haven't used a html helper, in part to show the actual required html, also by default the lambda textbox helper seem slightly buggy in this area so I tend to avoid it for globalized date input.

The main thing to notice is the datePattern variable being set from the CurrentUICulture DateTime format.

Add the JavaScript

This next bit might seem a little hacky but it works really well.

At the top of my page I save the currentUICulture into the window object:

<script type="text/javascript">
    window.currentUICulture = '@Thread.CurrentThread.CurrentUICulture.Name';
</script>

And at the bottom of the page I initialize the datePicker with the currentUICulture using the following code:

<script type="text/javascript">
    $(document).ready(function() {
        $('.datepicker').datepicker({
            language: window.currentUICulture
        });
    })

Providing the selected culture's corresponding local script has been loaded the calendar will now display correctly for the currentUICulture.

Test it out

An easy way to test this is to change your applications CurrentUICulture, this can easily be achieved by adding the following to your Global.asax file like the following:

protected void Application_BeginRequest()
{
    Thread.CurrentThread.CurrentUICulture = new CultureInfo("de");
}

And there you have it, a cool calendar which you can control for global applications.