MVC 和 jQuery 日期选择器答案

【问题标题】：MVC and jQuery datepickerMVC 和 jQuery 日期选择器
【发布时间】：2013-06-19 06:59:51
【问题描述】：

我正在尝试将 datepicker 应用于 class 属性等于 datepicker 的文本框。

所以我这样做： _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(){}

但是有了这个我得到 js 错误说：未捕获的类型错误：对象 [对象对象] 没有方法 'datepicker' 我做错了什么，需要进行更改以使其正常工作？

【问题讨论】：

标签： c# asp.net-mvc jquery-ui asp.net-mvc-4 jquery-ui-datepicker

【解决方案1】：

Object [object Object] 没有方法 'datepicker' 我在做什么错了，需要更改以使其正常工作吗？

您应该在布局中包含 jquery-ui 包：

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

日期选择器扩展是jQuery UI 的一部分。

此外，由于您的脚本包含在 DOM 的末尾，您不需要将它们包装在 $(document).ready 回调中：

@section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
  <script type="text/javascript">
      $(".datepicker").datepicker();
  </script>
}

【讨论】：

好的，但是没有日期选择器的背景，我错过了什么吗？
是的，您缺少 ~/Content/themes/base/css 样式包。您可以将其添加到布局的<head> 部分：@Styles.Render("~/Content/themes/base/css")。或者如果你想使用一些不同的主题，你可以在你的包中改变它。请在使用之前阅读jQuery UI 的文档，以熟悉基本要求和入门方法。
是的，你有 rigth :) 非常感谢@Darin

【解决方案2】：

这并不能直接回答您的问题，因为 Darin Dimitrov 明白了，但我会建议您的代码过于复杂。

您可以将您的 javascript 简化为：

<script type="text/javascript">
    $(".datepicker").datepicker();
</script>

【讨论】：

你也可以给日期格式。例如 $(".datepicker").datepicker({ dateFormat: "m/d/yy", })