jQuery datepicker's dateFormat - how to integrate with .NET current culture DateTimeFormat

Question

I'm using jQuery's datepicker plugin in .NET ASP MVC3 intranet application. User that use application have offices in different countries and different locale. This is why I wanted to integrate Thread.CurrentThread.CurrentCulture.DateTimeFormat with jQuery datepicker plugin. My first solution was to create helper extension method:

    public static string jQueryDatePickerFormat(this HtmlHelper helper)
    {
        return Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern;
    }

and set dateFormat option in javascript like this:

$("#StartDate").datepicker({ dateFormat: '@Html.jQueryDatePickerFormat()' });

Soon after I realized that datepicker's dateFormat option supports formats that have different implementation from format in .NET.

For instance: Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern for pl-PL returns yyyy-MM-dd (it will format date as 2010-01-01), whereas the same format in datePicker will format the same date as 20102010 January 01. I quickly adapted my helper method and applied quick fix Replace("yyyy", "yy").Replace("MM", "mm"):

    public static string jQueryDatePickerFormat(this HtmlHelper helper)
    {
        return Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern.Replace("yyyy", "yy").Replace("MM", "mm");
    }

I works, but I wait for the moment when other issues will emerge. Is there any simpley way to implement .NET locale settings into jQuery's datePicker plugin?

Thanks,Pawel

Answer 1

The codeproject article JQueryUI Datepicker in ASP.NET MVC http://www.codeproject.com/Articles/62031/JQueryUI-Datepicker-in-ASP-NET-MVC has function that does exactly what you wanted

    /// Converts the .net supported date format current culture 
/// format into JQuery Datepicker format.
/// </summary>
/// <param name="html">HtmlHelper object.</param>
/// <param name="format">Date format supported by .NET.</param>
/// <returns>Format string that supported in JQuery Datepicker.</returns>
public static string ConvertDateFormat(this HtmlHelper html, string format)

I've also posted a function that does the opposite-Translate jQuery UI Datepicker format to .Net Date format

Answer 2

I've sumbled upon the same problem some time ago. The path I took was just to convert whatever jQuery datepicker provide me to milis (.getTime()). Knowing that javascript time is based on date of 1,1,1970 and .NET on 1,1,0 I'm able to do the calculation on my controller side

So assuming you're passing javscript DateTime.getTime() value to your controller you can ;

var myDate = new DateTime(1970, 1, 1) + new TimeSpan(time * 10000);

in your view you could ;

    $.datepicker.setDefaults($.datepicker.regional["pl"]);

    $("#StartDate").datepicker({
        dateFormat: "yy-mm-dd",
        onSelect: function (dateText) {
            var currentDate = new Date(dateText);
            time = currentDate.getTime();
            // $.post | $.ajax here - whatever you need
        }
    });

You will want to remember about TimeZones and the fact that javascript takes that into account when calculating dates.

Answer 3

store in hidden field

        <input id="dateFormate" type="hidden" 
value='@System.Threading.Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern.ToLower().Replace("yyyy", "yy")'/>

        @Html.HiddenFor(model=>model.StartDate)
        @Html.HiddenFor(model=>model.EndDate)
        <input type="text" id="tbStartDate" value="" disabled="disabled" />
        <input type="text" id="tbEndDate" value="" disabled="disabled" />
        <script type="text/javascript">
            $(document).ready(function () {
                $("#tbStartDate").datepicker({
                    dateFormat: $('#dateFormate').val(),
                    showOn: 'button',
                    buttonImageOnly: true,
                    buttonImage: '/Content/Calendar.png',
                    buttonText: 'Click here (date)',
                    onSelect: function (dateText, inst) {
                        var $endDate = $('#tbStartDate').datepicker('getDate');
                        $endDate.setDate($endDate.getDate() + 1);
                        $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate);
                    },
                    onClose: function (dateText, inst) {
                        $("#StartDate").val($("#tbStartDate").val());
                    }
                });

                $("#tbEndDate").datepicker({
                    dateFormat: $('#df').val(),
                    showOn: 'button',
                    buttonImageOnly: true,
                    buttonImage: '/Content/Calendar.png',
                    buttonText: 'Click here (date)',
                    onClose: function (dateText, inst) {
                        $("#EndDate").val($("#tbEndDate").val());
                    }
                });

                var $endDate = $('#tbStartDate').datepicker('getDate');
                $endDate.setDate($endDate.getDate() + 1);
                $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate);
            });
        </script>