Menu
What I'm trying to is apply datepicker into textboxes with class attribute equals datepicker.
So I'm doing 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";
}
@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 js error which say: Uncaught TypeError: Object [object Object] has no method 'datepicker' What am I doing wrong and need to change to make it work as it should?
680
Object [object Object] has no method 'datepicker' What am I doing wrong and need to change to make it work as it should?
You should include the jquery-ui bundle to your layout:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@RenderSection("scripts", required: false)
The datepicker extension is part of jQuery UI.
Also since your scripts are included at the end of the DOM you don't need to be wrapping them in a $(document).ready callback:
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(".datepicker").datepicker();
</script>
}
This doesn't directly answer your question, since Darin Dimitrov got it, but I'll make a suggestion that your code is overly complex.
You can simplify your javascript to this:
<script type="text/javascript">
$(".datepicker").datepicker();
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
