PickADate日历控件无法按预期工作

时间:2019-06-14 11:03:59

标签: javascript asp.net-mvc bundle jquery-ui-datepicker pickadate

我正在为我的MVC项目使用管理模板。此管理模板已与pickadate javascript集成在一起。我将日历控件嵌入到@ HTML.EditorFor中。 页面加载时,控件加载正常,并且还显示日历。但是它以一种奇怪的方式加载。首先,如果我将控件与日期绑定,例如- 我想在页面加载时在编辑器字段中显示14/06/2019,如果用户希望他可以从日历控件中更改。 该日期也会加载,但是日历会显示在该日期上**选择100年后的年份**控件的默认日期应为今天的日期。

如果我尝试从开发人员工具调试此错误,我总是会收到此错误消息-

Uncaught TypeError: Cannot read property 'get' of undefined at pick-a-datetime.min.js:1

我在mvc中并不陌生,但是javascript总是给我带来问题。我尝试了所有论坛上的PickADate问题,但没有找到解决方案。 如果有人可以解释,那将非常有帮助。

这就是我在Bundle文件中加载JS资源的方式-

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

           //*START* VENDOR MAIN
           "~/XXXXX_ADMIN/app-assets/vendors/js/vendors.min.js", /*this is what breaks the autocomplete OG*/
           //*END* VENDOR MAIN

//*START* CORE
"~/XXXXX_ADMIN/app-assets/js/core/app-menu.min.js",
"~/XXXXX_ADMIN/app-assets/js/core/app.min.js",
//*END* CORE


//*START* PICKERS
"~/XXXXX_ADMIN/app-assets/vendors/js/pickers/pickadate/picker.js",
"~/XXXXX_ADMIN/app-assets/vendors/js/pickers/pickadate/picker.date.js",
"~/XXXXX_ADMIN/app-assets/vendors/js/pickers/pickadate/picker.time.js",
"~/XXXXX_ADMIN/app-assets/vendors/js/pickers/pickadate/legacy.js",
"~/XXXXX_ADMIN/app-assets/vendors/js/pickers/dateTime/moment-with-locales.min.js",
"~/XXXXX_ADMIN/app-assets/vendors/js/pickers/daterange/daterangepicker.js",
//*END* PICKERS

//*START* PICKERS
"~/XXXXX_ADMIN/app-assets/js/scripts/pickers/dateTime/pick-a-datetime.min.js",
//*END* PICKERS

bundles.Add(new ScriptBundle("~/custom/defaultJquery").Include(
           "~/XXXXX_ADMIN/app-assets/js/core/libraries/jquery.min.js",
           "~/XXXXX_ADMIN/app-assets/js/core/libraries/jquery_ui/jquery-ui.min.js"));

我正在_Layout页面中添加加密引用-

<body>
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>

在MVC视图中显示日期的代码

<div class="form-group">
    @Html.EditorFor(model => Model.Employee.FirstOrDefault().DateJoin, new { htmlAttributes = new { @class = "pickadate form-control validate[required]", @style = "background-color:white;" } })
</div>

This is how the calendar looks after loading

The JS error in Developer tools

The selected section is the error part in JS file

0 个答案:

没有答案