I am trying to apply datepicker to text fields with class attribute equal to datepicker .
So, I do it like this: _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>
view1.cshtml
@model Zaliczenie_SIG.Models.InvoiceModel @{ ViewBag.Title = "Add"; Layout = "~/Views/Shared/_Layout.cshtml"; }
Add
@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> }
Model.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(){}
But with this I get a js error that says: Uncaught TypeError: Object [object Object] does not have a 'datepicker' method. What am I doing wrong and need to be changed so that it works as it should?
source share