MVC 数据注释对应的日期时间选择器未在 Firefox 中显示答案

【问题标题】：MVC Data Annotations corresponding DateTime picker not showing in FirefoxMVC 数据注释对应的日期时间选择器未在 Firefox 中显示
【发布时间】：2016-06-25 07:40:47
【问题描述】：

我有一个这样的模型

public class Movie
{
    public int ID { get; set; }

    [StringLength(60, MinimumLength = 3)]
    public string Title { get; set; }

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

    ....
}

并且 datetime 的这个属性应该在所有浏览器中呈现一个 DateTime 选择器，但它在 Firefox（版本 38.0.5）中没有发生，它在 Google Chrome 中工作，有什么解决方案吗？

[Display(Name = "Release Date")]
[DataType(DataType.Date)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
public DateTime ReleaseDate { get; set; }**

查看代码

@model MVCMovie.Models.Movie
....
@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()   
    <div class="form-group">
        @Html.LabelFor(model => model.Title, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>
    </div>
    <div class="form-group">
       @Html.LabelFor(model => model.ReleaseDate, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ReleaseDate)
            // @Html.TextBoxFor(model => model.ReleaseDate, new { @class = "form-control datepicker", placeholder = "Enter Drop-off date here..." })
            @Html.ValidationMessageFor(model => model.ReleaseDate)
        </div>
    </div>
    ....
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        /* ... */
        if (!Modernizr.inputtypes.date) {
            $('.datepicker').datepicker();
        }
    </script>
}

【问题讨论】：

type="date" 仅在 Chrome 和 Edge 中受支持 - refer browser comparison。使用 jquery 插件。
@Stephen ，您免费推荐的任何特定插件，以及您将如何更改视图代码？请帮助改进代码
没有推荐，但jQuery ui datepicker 和bootstrap-datepicker 都是受欢迎的选择。但还有很多其他的。
@Stephen，你给了我正确的路径

标签： c# asp.net-mvc asp.net-mvc-4 datetime datetimepicker

【解决方案1】：

我这样改变了我的模型

public class Movie
    {
        public int ID { get; set; }

         [StringLength(60, MinimumLength = 3)]
        public string Title { get; set; }

         [Required]  
        [Display(Name = "Release Date")]
        //[DataType(DataType.Date)]
        [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
        public DateTime ReleaseDate { get; set; }

       .....
    }

添加了 jQueryUI NuGet 包

创建了一个这样的包

//Create bundel for jQueryUI  
            //js  
            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                      "~/Scripts/jqueryui.js"));
            //css  
            bundles.Add(new StyleBundle("~/Content/cssjqryUi").Include(
                   "~/Content/jqueryui.css"));

并在视图中在底部添加了此部分

@section Scripts {

@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/cssjqryUi")

<script type="text/javascript">
    $(document).ready(function () {
        $('input[type=datetime]').datepicker({
            dateFormat: "dd/M/yy",
            changeMonth: true,
            changeYear: true,
            yearRange: "-60:+0"
        });

    });
</script>
}

现在可以正常使用了

【讨论】：