MVC and jQuery datepicker

Question

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?

Darin Dimitrov · Accepted Answer · 2013-06-19 07:02:29Z

8

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

answered Jun 19, 2013 at 7:02

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Harry89pl Over a year ago

ok it's worked but there is no background of datepicker am i missed something else?

Darin Dimitrov Over a year ago

Yes, you are missing the ~/Content/themes/base/css style bundle. You could add that to the <head> section of your Layout: @Styles.Render("~/Content/themes/base/css"). Or if you want to use some different theme, you could change that in your bundles. Please read the documentation of the jQuery UI before using it to familiarize yourself with the basic requirements and how to get started.

Harry89pl Over a year ago

Yes you had rigth:) Thanks a lot @Darin

Rowan Freeman · Accepted Answer · 2013-06-20 04:05:52Z

3

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>

edited Jun 20, 2013 at 4:05

answered Jun 19, 2013 at 7:02

Rowan Freeman

16.5k12 gold badges72 silver badges105 bronze badges

1 Comment

Altaf Sami Over a year ago

you can give date formate also. e.g $(".datepicker").datepicker({ dateFormat: "m/d/yy", })

Collectives™ on Stack Overflow

MVC and jQuery datepicker

Add

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Add

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related