CODEWITHSUNDEEP
c#asp.net-mvcjquery-uiasp.net-mvc-4jquery-ui-datepicker
Harry89pl
Harry89pl

Reputation: 2435

MVC and jQuery datepicker

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";
}

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 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?

Upvotes: 5

Views: 15624

Answers (2)

Rowan Freeman
Rowan Freeman

Reputation: 16388

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>

Upvotes: 3

Darin Dimitrov
Darin Dimitrov

Reputation: 1039438

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>
}

Upvotes: 8

Related Questions