Question

我已按照我在网上找到的说明并从软件包管理器安装了jQuery.ui完整软件包。我用它玩了很多，当我运行时我无法弹出它。以下是我视图中需要弹出日历的所有相关代码。

一个简单的线条只是一个测试，是从我接下来的教程中复制的，看看是否有效，而不是我的编辑器。

@model Project.Models.Event
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( function() {
$( "#datepicker" ).datepicker();
  } );
    </script>
</head>

@{
ViewBag.Title = "Create";
}

<h2>Create</h2>



<body>
@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Event</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })




    <p>Date: <input type="text" id="datepicker"></p>




    <div class="form-group">
        @Html.LabelFor(model => model.EventDate, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10" id="datepicker">
            @Html.EditorFor(model => model.EventDate, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.EventDate, "", new { @class = "text-danger" })
        </div>
    </div>

Answer 1

而不是EditorFor()使用TextboxFor()并修复您的htmlAttributes

@Html.TextboxFor(model => model.EventDate,
    htmlAttributes: new { @class = "form-control datepicker" })

将呈现<input type="text">。如果model属性为DateTime，则EditorFor会生成<input type="datetime">。日期时间控件与插件冲突。

jQuery插件可以使用日期时间控件，但我使用了其他不起作用的插件，不得不切换到纯文本输入。

然后你需要实际初始化插件。您已使用特定标识#datepicker完成此操作，以便控件正常工作。您无法复制ID值，因此您遇到了未指定的行为 - 第一个元素已注册，但未注册第二个div。

也许改用一个班级：

$(".datepicker").datepicker();

或选择唯一的ID。

$("#datepicker1").datepicker();
$("#datepicker2").datepicker();

如何实现jQuery datepicker？

1 个答案: