Datepicker 适用于浏览器 Google Chrome 但不适用于 firefox

Question

这是我的模式

 [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"));
    }
}

} 但我真的不知道...该怎么办

Answer 1

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

这仅在某些现代浏览器中受支持，而在 FireFox 中则完全不支持。 Refer comparison here

旁注：为了使日期选择器正确呈现 DO_Joining 的值，您还必须使用 ISO 格式（否则在支持它的各种浏览器中输出不一致）。而且您不需要 [Required] 属性（除非您的 DateTime? - 即可为空）

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

Datepicker 适用于浏览器 Google Chrome 但不适用于 firefox

Datepicker works with browser Google Chrome but not with firefox

asp.net-mvc

asp.net-mvc-4