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

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

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>

Answer 3

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.