jQuery datepicker 的 dateFormat - 如何与 .NET 当前文化 DateTimeFormat 集成答案

【问题标题】：jQuery datepicker's dateFormat - how to integrate with .NET current culture DateTimeFormatjQuery datepicker 的 dateFormat - 如何与 .NET 当前文化 DateTimeFormat 集成
【发布时间】：2011-12-16 07:46:42
【问题描述】：

我在 .NET ASP MVC3 Intranet 应用程序中使用 jQuery 的 datepicker 插件。使用应用程序的用户在不同的国家和地区设有办事处。这就是我想将 Thread.CurrentThread.CurrentCulture.DateTimeFormat 与 jQuery datepicker plugin 集成的原因。我的第一个解决方案是创建辅助扩展方法：

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

并在 javascript 中设置 dateFormat 选项，如下所示：

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

不久之后，我意识到 datepicker 的 dateFormat 选项支持的格式与 .NET 中的格式不同。

例如：Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern 用于 pl-PL 返回 yyyy-MM-dd（它将日期格式化为 2010-01-01 )，而 datePicker 中的相同格式将设置与 20102010 January 01 相同的日期。我迅速调整了我的辅助方法并应用了快速修复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");
    }

我工作，但我等待其他问题出现的那一刻。有没有什么简单的方法可以在 jQuery 的 datePicker 插件中实现 .NET 语言环境设置？

谢谢，帕维尔

【问题讨论】：

嗨，您的问题解决了吗？

标签： jquery asp.net-mvc asp.net-mvc-3 jquery-ui jquery-ui-datepicker

【解决方案1】：

代码项目文章 JQueryUI Datepicker in 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)

我还发布了一个相反的功能-Translate jQuery UI Datepicker format to .Net Date format

【讨论】：

【解决方案2】：

前段时间我偶然发现了同样的问题。我采取的路径只是将 jQuery datepicker 提供给我的任何内容转换为 milis (.getTime())。知道 javascript 时间基于 1,1,1970 的日期和 1,1,0 的 .NET 我能够在我的控制器端进行计算

因此，假设您将 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 在计算日期时考虑到这一点的事实。

【讨论】：

【解决方案3】：

存储在隐藏字段中

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

【讨论】：