无法让 Jquery datepicker 在我的 asp.net mvc 项目中工作

Posted 2023-05-09

【中文标题】无法让 Jquery datepicker 在我的 asp.net mvc 项目中工作

【英文标题】：Can't get Jquery datepicker to work in my asp.net mvc project

【发布时间】：2017-10-14 07:08:37

【问题描述】：

我有一个简单的页面，我想在其中添加一个 datepicker 到我的 textboxfor 并只修改格式，但页面上根本没有显示任何内容，我尝试在 jquery datepicker 文档中导入他们所说的所有脚本： https://jqueryui.com/datepicker/

这是我项目中的 cshtml 页面，到目前为止，我已经尝试使其正常工作：

@using System.Web.UI.WebControls
@using InscriptionCentreFormation.Controllers
@using InscriptionCentreFormation.Models
@model INSC_Inscription
@
 ViewBag.Title = "InscriptionFormation";
 Layout = "~/Views/Shared/_Layout.cshtml";

@Html.ValidationSummary(true, "", new  @class = "text-danger" )
<br />
@using (Html.BeginForm("InscriptionFormation", "DetailProduit"))

    @Html.HiddenFor(m => m.idOccurenceFormation);
    <div style="width:550px;">
        <br />
        <span style="float:left"><b>Date de naissance :</b></span>
        @Html.TextBoxFor(m => m.DateNaissanceChaine, new  Style = "float:right;width:350px;",id="datepicker" )
        <br />
        @Html.ValidationMessageFor(model => model.DateNaissanceChaine, "", new  @class = "text-danger")      

        </div>
    <input type="submit" class="btn" value="S'inscrire" style="width:200px; text-align:center;"/>

<script>
$(document).ready(function () 
    $("#datepicker").datepicker(
        format: 'DD-MM-YYYY'
    );
);
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

所以根据文档，我不知道我做错了什么，它似乎很容易实现，所以我可能只是错过了一些重要的东西，因为该字段仅显示为普通文本框

任何提示都会很有帮助

更新

这是来自控制台的错误：

TypeError: $(...).datepicker is not a function

最后我发现了问题，似乎jquery-ui已经加载到布局页面上，并且由于加载了两次而产生了问题

 @Scripts.Render("~/bundles/jqueryui")

【问题讨论】：

因为你在 datepicker 初始化之后加载了jquery 和jquery-ui。

您没有带有id="datepicker" 的文本框。将脚本更改为$("#DateNaissanceChaine").datepicker( ...（您已将id 添加到验证消息占位符中）

实际上他有一个带有id="datepicker"的元素，但不是textbox。这是验证消息。

您的日期格式无效。使用'dd-mm-yy'

请勿更改问题中的代码，并使已添加的 cmets 和答案无效。

【参考方案1】：

问题是因为您尝试使用datepicker 库之前将它包含在页面中。将包含您的代码的<script> 块放在对jQuery.js 和jQueryUI.js 的引用之后。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $(document).ready(function () 
    $("#datepicker").datepicker(
      format: 'DD-MM-YYYY'
    );
  );
</script>

另请注意，您将datepicker id 放在验证标签上，而不是应该放在输入元素上：

@Html.TextBoxFor(m => m.DateNaissanceChaine, new  Style = "float: right; width: 350px;", id = "datepicker )
<br />
@Html.ValidationMessageFor(model => model.DateNaissanceChaine, "", new  @class = "text-danger" )      

我还强烈建议您将样式规则放在类中，然后将这些类添加到 HTML 中。在 HTML 中放置内联样式只会使代码变得混乱，并且不是很好的关注点分离

【讨论】：

我之前放了，页面上仍然没有显示

那是因为你在ValidationMessageFor 上设置了datepicker id，而它应该在TextBoxFor 中。我为你更新了答案

在这种情况下，请检查控制台并报告您发现的任何错误

您在问题中编辑的错误意味着您没有正确包含 jqueryUI，或者仍在尝试在错误的位置执行 datepicker()。孤立地你的代码工作正常：jsfiddle.net/8rs7sf5p

我想问题出在我的项目中，所以无论如何感谢您的帮助

【参考方案2】：

移动这个脚本

<script>
$(document).ready(function () 
    $("#datepicker").datepicker(
        format: 'dd-mm-yy'
    );
);

在 Jquery 导入下方

还将id="datepicker" 移动到TextBoxFor()。