無法讓jquery datepicker在我的asp.net mvc項目中工作

我有一個簡單的頁面，我想將日期選擇器添加到我的文本框中，只是修改格式，但頁面上沒有顯示任何內容，試圖導入所有他們說jQuery的日期選擇文檔這裏所需要的腳本：https://jqueryui.com/datepicker/無法讓jquery datepicker在我的asp.net mvc項目中工作

這裏是我的項目我的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")

來源

2017-05-15 Louis-Roch Tessier

因爲您在datepicker初始化後加載了'jquery'和'jquery-ui'。 – mmushtaq

你沒有'id =「datepicker」'的文本框。將腳本改爲'$（「＃DateNaissanceChaine」）。datepicker（{...'（你已經將該id添加到了驗證消息佔位符） –

實際上，他有一個元素帶有id =「datepicker」，但它不是'textbox'，它是驗證信息 – mmushtaq

問題是因爲您試圖在之前使用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>

另外請注意，你把驗證標籤上的ID datepicker，而不是輸入元素上，因爲它應該是：

@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中添加內聯樣式只會使代碼變得渾濁，並且不能很好地區分問題

來源

2017-05-15 13:14:00

我把它放在前面，但頁面上仍然沒有顯示 –

這是因爲你在'ValidationMessageFor'上設置了'datepicker' id，而它應該在'TextBoxFor'中。我更新了我的答案 –

我改變了它，但忘了更新我的壞 –

移動這個腳本

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

下面的Jquery進口

而且移動id="datepicker"到TextBoxFor（）。

來源

2017-05-15 13:13:54

無法讓jquery datepicker在我的asp.net mvc項目中工作

回答

相關問題