Question

我有一个简单的页面，我想在我的textboxfor中添加一个datepicker，只是修改格式，但页面上没有任何显示，我试图在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")

Answer 1

问题是因为您在之前尝试使用datepicker库，并将其包含在页面中。在对jQuery.js和jQueryUI.js的引用之后放入包含代码的<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> <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中添加内联样式只会使代码变得混乱，并且不能很好地分离关注点

Answer 2

移动此脚本

bitmap = Bitmap.createBitmap(bitmap, bitmap.getWidth()/2 - bitmap.getHeight()*heightMultiplier/widthMultiplier/2, 0, bitmap.getHeight()*heightMultiplier/widthMultiplier, bitmap.getHeight(), matrix, false);

在Jquery Import

下面的

同时将<script> $(document).ready(function () { $("#datepicker").datepicker({ format: 'dd-mm-yy' }); });移动到TextBoxFor（）。

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

2 个答案: