Hydrargyrum Hydrargyrum - 4 months ago 29
jQuery Question

How to integrate datetimepicker with ASP.NET localisation

I'm using Trent Richardson's datetimepicker extension for JQuery, obtained via NuGet:
http://trentrichardson.com/examples/timepicker/

Trent's documentation says that you can create a localised datetimepicker like this:

$('#basic_example_4').timepicker(
$.timepicker.regional['es']
);


I'm attaching a datetimepicker to an ASP.NET TextBox by setting the CssClass property on the TextBox, and having the JavaScript attach the datetimepicker by selecting on the CSS class:

<script type="text/javascript">
$(document).ready(function () {
$('.calendarStartDateTime').datetimepicker({
dateFormat: 'yy-mm-dd',
timeFormat: 'hh:mm TT',
controlType: 'select',
oneLine: true
});
});
</script>
...
<asp:TextBox ID="StartDateTime" runat="server" CssClass="calendarStartDateTime" meta:resourcekey="StartDateTimeResource1"></asp:TextBox>


My ASP.NET page declaration sets
culture="auto"
and
uiculture="auto"
so that all the ASP.NET elements pick up culture settings from the browser settings (and so I can use ASP.NET Resources to localise text).

I would like the datetimepicker to also automatically apply localisation based on the browser settings, consistently with how the server-side components are being localised. How do I achieve this? Do I need to insert an ASP.NET tag into the Javascript, something like:

<script type="text/javascript">
$(document).ready(function () {
$('.calendarStartDateTime').datetimepicker({
$.timepicker.regional[<% magic happens here %>],
controlType: 'select',
oneLine: true
});
});
</script>


Or should the browser culture be detected in pure JavaScript?




EDIT: based on @smirnov's answer, my final code for the timepicker was:

<script type="text/javascript">
$(document).ready(function () {
$('.calendarStartDateTime').datetimepicker(
$.extend(
{},
$.datepicker.regional['<%= System.Globalization.CultureInfo.CurrentCulture.TwoLetterISOLanguageName %>'],
$.timepicker.regional['<%= System.Globalization.CultureInfo.CurrentCulture.TwoLetterISOLanguageName %>'],
{
dateFormat: 'yy-mm-dd',
timeFormat: '<%= System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortTimePattern %>',
controlType: 'select',
oneLine: true
}
)
)
});
</script>


This code correctly merges the regionalisation settings for jQuery's built-in datepicker, Trent Richardson's timepicker properties, and some custom settings.

Answer

Use CultureInfo.CurrentCulture.TwoLetterISOLanguageName

As timepicker seems to use country code as a value for regional, try

...
$.timepicker.regional['<%=System.Globalization.CultureInfo.CurrentCulture.TwoLetterISOLanguageName%>'],
...
Comments