jQuery UI 日期选择器不工作？答案

【问题标题】：jQuery UI datepicker not working?jQuery UI 日期选择器不工作？
【发布时间】：2017-03-08 14:48:07
【问题描述】：

我的 Web 应用程序中显示了 jQuery ui datepicker，但是当我去选择一个日期时，它什么也没做。并且默认的 Html5 日期选择器仍在显示。

如何禁用 Html5 以使 jQuery Ui 日期选择器正常工作？

这就是我编写代码的方式：

创建.cshtml

 @Html.LabelFor(model => model.EnrollmentDate, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.EnrollmentDate, new { htmlAttributes = new { @class = "form-control", @id = "datepicker" } })
                    @Html.ValidationMessageFor(model => model.EnrollmentDate, "", new { @class = "text-danger" })

........

@section Scripts {
<script>
    $(document).ready(function(){
        $('#datepicker').datepicker({
        dateFormat: 'dd-mm-yy'
       });
    });
</script>        
    @Scripts.Render("~/bundles/jqueryval")
}

【问题讨论】：

标签： javascript css html jquery-ui datepicker

【解决方案1】：

我只需将@Html.EditFor 的类型设为文本类型，它就可以工作了。尝试使用 @Html.TextBoxFor 对我不起作用。

@Html.EditorFor(model => model.EnrollmentDate, new { htmlAttributes = new { @class = "form-control", @type = "text" } })

<script>
    $(function(){
        $('#EnrollmentDate').datepicker({
            changeMonth: true,
            changeYear: true
        });
    });
</script>

【讨论】：

【解决方案2】：

我偶然发现这个问题的原因是因为我将 jQuery UI 用于日期选择器。由于某种原因，它无法在基于 Chromium 的浏览器上正常运行。

为了使它们正常工作，只有当浏览器基于 Chromium 时，我才必须将类型更改为“文本”。

为此，我只写了以下内容：

function fixDatepickers(){
    if (window.chrome !== undefined) {
        $('#ID_of_datepicker')[0].type = 'text';
    }
}

然后在日期选择器不起作用的 HTML 页面中调用它：

<script src="file_with_new_func.js"></script>
<script type="text/javascript">$(document).ready(fixDatepickers());</script>

像魅力一样工作！

【讨论】：