asp.net mvc 中的跨浏览器日期选择器格式答案

【问题标题】：Cross-browser datepicker format in asp.net mvcasp.net mvc 中的跨浏览器日期选择器格式
【发布时间】：2014-09-23 08:35:11
【问题描述】：

要让 Chrome 和其他原生支持 Html5 日期的浏览器显示日期选择器，我需要将这些属性放在模型中的日期属性上：

        [DataType(DataType.Date)]
        [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
        public DateTime? From { get; set; }

对于其他浏览器，我使用 jQuery UI 中的日期选择器。

我已将日期选择器设置为使用 dd.MM.yyyy 格式 dd.MM.yyyy。

只要用户点击该字段并选择一个日期，它就可以工作，但是当字段中有来自服务器端的数据时，它会以 yyyy-MM-dd 格式显示，并且在打开日期选择器时不会被选为默认值。

当必须从服务器以 yyyy-MM-dd 格式发送日期才能使用原生 html5 日期选择器时，如何以 dd.MM.yyyy 格式显示日期？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/modernizr-2.6.2.js"></script>
    <script src="Scripts/jquery-ui-1.10.2.js"></script>
    <script src="Scripts/jquery-ui-i18n.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            if (!Modernizr.inputtypes.date) {
                $.datepicker.setDefaults(
                    $.extend(
                    {
                        'dateFormat': 'mm.dd.yy',
                        'altFormat': 'yy-mm-dd'
                    },
                    $.datepicker.regional['no']
                    )
                    );              
                $("#From").datepicker().val();
                $("#To").datepicker();
            }
        })
    </script>
</head>
<body>
    <form action="/Home/Date" method="post">        
        <label for="From">From: </label>
        <input id="From" name="From" type="date" value="2014-09-23" />
        <label for="To">To: </label>
        <input id="To" name="To" type="date" value="2014-10-09" />        
        <input type="submit" value="Save" class="btn btn-default" />
    </form>
</body>
</html>

在 Chrome 中，这使用本机日期选择器并根据 Chrome 设置格式化日期。

在 Firefox 中呈现如下：

在您单击一个字段并选择一个日期后，它使用我想要的格式，dd.MM.yyyy

有没有办法强制 jQuery 日期选择器在页面加载时格式化包含的数据？

【问题讨论】：

试试这个技巧：创建另一个隐藏的日期选择器，格式为yyyy-MM-dd。当你读取/发送数据时，只需使用getDate & setDate同步两个日期选择器。
为什么不在jquery datepicker中设置日期格式呢？那么服务端和客户端都使用相同的格式？
我确实在 datepicker 中设置了日期格式，一旦用户实际单击 datepicker，一切都会完美运行。问题是它在用户单击日期字段之前显示错误的格式。
你解决过这个问题吗？

标签： asp.net-mvc html jquery-ui

【解决方案1】：

您可以在 Global.asax 文件中更改当前的文化，用于应用程序级别例如您可以尝试任何您想要的格式，

using System.Globalization;
using System.Threading;

protected void Application_BeginRequest(Object sender, EventArgs e)
{    
  CultureInfo newCulture = (CultureInfo) System.Threading.Thread.CurrentThread.CurrentCulture.Clone();
  newCulture.DateTimeFormat.ShortDatePattern = "dd-MMM-yyyy";
  newCulture.DateTimeFormat.DateSeparator = "-";
  Thread.CurrentThread.CurrentCulture = newCulture;
}

【讨论】：