5

我正在尝试将 datepicker 应用到class属性为 equals的文本框中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>
}

模型.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 错误，它说： Uncaught TypeError: Object [object Object] has no method 'datepicker' 我做错了什么，需要改变以使其正常工作？

4

2 回答 2

8

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

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

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

datepicker 扩展是jQuery UI.

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

@section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
  <script type="text/javascript">
      $(".datepicker").datepicker();
  </script>
}
于 2013-06-19T07:02:29.417 回答
3

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

您可以将您的 javascript 简化为：

<script type="text/javascript">
    $(".datepicker").datepicker();
</script>
于 2013-06-19T07:02:45.080 回答