Datepicker适用于浏览器谷歌Chrome,但不适用于Firefox

时间:2015-02-10 17:10:22

标签: asp.net-mvc asp.net-mvc-4

这是我的模态

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

Tha Date Picker可正常运行,无需在Google Chorme中应用任何DatePicker或JQuery,但无法在Firefox中运行。任何机构都可以解释是什么问题。

这是我的观点

<div class="editor-label">
        @Html.LabelFor(model => model.DO_Joining)
    </div>
    <div>
        @Html.EditorFor(model => model.DO_Joining)


        @Html.ValidationMessageFor(model => model.DO_Joining)
    </div>

并使用这些捆绑

{
public class BundleConfig
{
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js",
                    "~/Scripts/datepick/ts_picker.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "~/Content/themes/base/jquery.ui.accordion.css",
                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                    "~/Content/themes/base/jquery.ui.button.css",
                    "~/Content/themes/base/jquery.ui.dialog.css",
                    "~/Content/themes/base/jquery.ui.slider.css",
                    "~/Content/themes/base/jquery.ui.tabs.css",
                    "~/Content/themes/base/jquery.ui.datepicker.css",
                    "~/Content/themes/base/jquery.ui.progressbar.css",
                    "~/Content/themes/base/jquery.ui.theme.css"));
    }
}

}  但我真的不知道......该如何处理

1 个答案:

答案 0 :(得分:3)

@Html.EditorFor()用于使用[DataType(DataType.Date)]修饰的属性会导致<input ... type="date" />呈现HTML5日期选择器的浏览器版本。

仅在一些现代浏览器中支持,而在FireFox中根本不支持。 Refer comparison here

附注:为了使datepicker正确呈现DO_Joining的值,您还必须使用ISO格式(否则在支持它的各种浏览器中存在不一致的输出)。并且您不需要[Required]属性(除非您的DateTime? - 即可以为空)

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