MVC et datepicker de jQuery

Ce que je veux, c'est d'appliquer datepicker dans des zones de texte avec class attribut est égal à datepicker.

Donc je fais comme ceci:
_Layout.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script src="@Url.Content("~/Scripts/jquery-2.0.2.js")" 
type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
rel="stylesheet"  type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.3.js")" 
type="text/javascript"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-right">
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>

vue1.cshtml

@model Zaliczenie_SIG.Models.InvoiceModel
@{
ViewBag.Title = "Add";
Layout = "~/Views/Shared/_Layout.cshtml";
}

Ajouter

@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>Invoice</legend>
<div class="editor-label">
@Html.LabelFor(model => model.InvoiceType)
</div>
<div class="editor-field">
@Html.DropDownList("InvoiceType",string.Empty)
@Html.ValidationMessageFor(model => model.InvoiceType)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.TransactionDate)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.TransactionDate, new { @class="datepicker"})
@Html.ValidationMessageFor(model => model.TransactionDate)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.PaymentDate)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.PaymentDate, new { @class="datepicker"})
@Html.ValidationMessageFor(model => model.PaymentDate)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ContractorId)
</div>
<div class="editor-field">
@Html.DropDownList("ContractorId",string.Empty)
@Html.ValidationMessageFor(model => model.ContractorId)
</div>
<p>
<input type="submit" value="Add" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Return to list", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
jQuery(document).ready(function() {
$(".datepicker").each(function () {$(this).datepicker();});
});
</script>
}

Modèle.cs

public int Id { get; set; }
[DisplayName("type")]
[Required(ErrorMessage = "required")]
public int InvoiceType { get; set; }
[DisplayName("Operation date")]
[Required(ErrorMessage = "required", AllowEmptyStrings = false)]
public DateTime TransactionDate { get; set; }
[DisplayName("Paymant date")]
public DateTime? PaymentDate { get; set; }
public DateTime DateOfIssue { get; set; }
[DisplayName("Pozycje Faktury")]
public IEnumerable<InvoiceItemModel> InvoiceItems { get; set; }
[Required(ErrorMessage = " required")]
[DisplayName("Contractor")]
public int ContractorId { get; set; }     
public InvoiceModel(){}

Mais avec cela je reçois js d'erreur qui dit: Uncaught TypeError: Object [object object] n'a pas de méthode "datepicker'
Ce que je fais mal et que vous devez changer pour le faire fonctionner comme il le devrait?

OriginalL'auteur harry180 | 2013-06-19

  1. 7

    Objet [object object] n'a pas de méthode "datepicker" Qu'est-ce que je fais
    mal et la nécessité de changer pour le faire fonctionner comme il le devrait?

    Vous devez inclure jquery-ui bundle à votre disposition:

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

    Le datepicker extension fait partie de jQuery UI.

    Aussi depuis vos scripts sont inclus à la fin de la DOM vous n'avez pas besoin de les envelopper dans une $(document).ready rappel:

    @section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(".datepicker").datepicker();
</script>
}
    ok ça fonctionne, mais il n'y a pas de fond de datepicker suis-je raté quelque chose d'autre?
    Oui, il vous manque le ~/Content/themes/base/css style bundle. Vous pourriez ajouter à la <head> la section de votre Mise en page: @Styles.Render("~/Content/themes/base/css"). Ou si vous souhaitez utiliser certaines thème différent, vous pouvez changer cela dans vos bottes. Veuillez lire la documentation de la jQuery UI avant l'utilisation afin de vous familiariser avec les exigences de base et la façon de commencer.
    Oui vous avez eu droit:) Merci beaucoup @Darin

    OriginalL'auteur Darin Dimitrov

  2. 3

    Cela ne veut pas répondre directement à votre question, depuis Darin Dimitrov eu, mais je vais faire une suggestion que votre code est trop complexe.

    Vous pouvez simplifier votre javascript:

    <script type="text/javascript">
$(".datepicker").datepicker();
</script>
    vous pouvez vous donner de date de formiate aussi. e.g $(".datepicker").datepicker({ dateFormat: "j/m/aa", })

    OriginalL'auteur Rowan Freeman