JQuery datepicker dateFormat - how to integrate with the current .NET culture DateTimeFormat

Question

I am using jQuery datepicker plugin in .NET ASP MVC3 intranet application. The user using the application has offices in different countries and different language standards. This is why I wanted to integrate Thread.CurrentThread.CurrentCulture.DateTimeFormat with the jQuery datepicker plugin . My first solution was to create a helper extension method:

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

and set the dateFormat parameter in javascript like this:

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

Shortly after I realized that the datepicker dateFormat parameter supports formats that have a different implementation from the format in .NET.

For example: Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern for PL-PL returns yyyy-MM-dd (it will format the date as 2010-01-01), while the same format in datePicker will format the same date as 20102010 January 01 . I quickly adapted my helper method and applied the 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 work, but I'm waiting for the moment when other problems appear. Is there an easy way to implement .NET language settings in the jQuery datePicker plugin?

Thanks Pawel

Answer 1

JQueryUI Datepicker ASP.NET MVC http://www.codeproject.com/Articles/62031/JQueryUI-Datepicker-in-ASP-NET-MVC , ,

    /// 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)

, - jQuery UI Datepicker .NET Date

Answer 2

. , , , jQuery datepicker milis (.getTime()). , javascript 1,1,1970 .NET 1,1,0, .

, , javscript DateTime.getTime() , :

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

, :

    $.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
        }
    });

TimeZones , javascript .

Answer 3

save 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>