MVC和jQuery日期拾取器

本文关键字：日期 jQuery MVC | 更新日期: 2023-09-27 18:19:10

我正在尝试的是将日期选择器应用到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错误说:Uncaught TypeError: Object [Object Object]没有方法'datepicker'我做错了什么，需要改变，使它的工作应该?

MVC和jQuery日期拾取器

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

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

你可以这样简化你的javascript:

<script type="text/javascript">
    $(".datepicker").datepicker();
</script>
相关文章：