将 DatePicker 用于 HTML 表单元素答案

【问题标题】：using DatePicker for HTML Form element将 DatePicker 用于 HTML 表单元素
【发布时间】：2015-11-20 23:11:34
【问题描述】：

我正在创建一个 asp.net mvc 网站，我正在尝试在我的视图中为我的模型属性之一添加一个日期时间选择器。目前显示一个日期选择器，但是当我选择一个日期并提交表单时，数据没有保存。在我尝试添加日期选择器之前，已保存信息，因此我相信日期选择器导致了我的问题。究竟应该如何将日期选择器添加到 HTML 表单中，我应该使用 jQuery UI 日期选择器还是在线提供的许多其他选择器之一？我没有使用 jQuery 的经验，所以可能是我不了解 datepicker 的工作原理或者没有正确的 js 脚本。谢谢！！

<head>
<title>Create</title>
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css" /> 
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-     lightness/jquery-ui.min.css" />

</head>

<h2>Create</h2>


@using(Html.BeginForm()) 
{
 @Html.AntiForgeryToken()

 <div class="form-horizontal">
    <h4>Event</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class =  "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new  { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
        </div>
    </div>

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

    <div class="form-group">
        @Html.LabelFor(model => model.Date, htmlAttributes: new { @class =  "control-label col-md-2" })
        <div class="col-md-10">

            @Html.EditorFor(model => model.Date, new {id = "news_date"})
            @Html.ValidationMessageFor(model => model.Date, "", new { @class  = "text-danger" })
        </div>
    </div>

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

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />

        </div>
    </div>
</div>
}

<div>
@Html.ActionLink("Back to List", "Index")   
</div>
<script>
$(document).ready(function () {
    $("#@Html.IdFor(m => m.Date)").datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script type="text/javascript"     src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-     ui.min.js"></script>

提交表单时调用的控制器方法如下所示

public ActionResult Create([Bind(Include = "EventID,Name,Location,Date,StartTime")] Meeting @meeting)
    {
        if (ModelState.IsValid)
        {

            context.Meetings.Add(@meeting);
            context.SaveChanges();   
            return RedirectToAction("Index");
        }

        return View();
    }

【问题讨论】：

您能发布您的型号代码吗？
stackoverflow.com/questions/5976938/…?
首先删除new {id = "news_date"} - 它什么都不做，幸运的是它没有，否则你的日期选择器将无法工作，因为你会引用错误的id。接下来删除倒数第二个脚本（jquery/1.10.2/jquery.min），因为您清除了bundles/jqueryval 呈现的脚本（不确定src="jquery.js" 是什么，但可能也需要删除）。您需要确保您的脚本以正确的顺序呈现。接下来删除 jquery.datetimepicker.js，因为您有 2 个日期选择器脚本（那个和 jquery-ui 一个）。
当你说“我选择了一个日期并提交了数据没有保存的表单”时发生了什么？是不是因为ModelState无效？
@StephenMuecke 按下提交时，我被重定向到索引页面，该页面旨在显示所有会议，但未显示我刚刚创建的会议，我检查了我的数据库并且它没有保存。在我的控制器 Create 方法中，我有一个 if 语句来检查 ModelState 是否有效，所以我不确定如果它实际上是有效的，我为什么会被重定向到 Index。如果 ModelState 无效，我将其设置为重定向到它没有执行的不同视图。我对视图和选择器进行了您建议的更改，但保存仍然是一个问题

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

【解决方案1】：

更改日期格式以使用默认值：

$("#@Html.IdFor(m => m.Date)").datepicker({ dateFormat: 'dd/mm/yy' });

到

$("#@Html.IdFor(m => m.Date)").datepicker();

或

$("#@Html.IdFor(m => m.Date)").datepicker({ dateFormat: 'mm/dd/yy' });

请注意，为了修复它，您需要指定月/日/年而不是日/月/年。这是因为服务器端期待 mm/dd/yy 而客户端提供 dd/mm/yy。

【讨论】：

我已对脚本进行了您建议的更改，但遗憾的是模型仍未保存到我的数据库中

【解决方案2】：

EditorFor 呈现为：<input type="date" data-val="..." ... />

在 Chrome 中，EditorFor 呈现了一个默认的日期选择器，但是 IE 这不起作用。

我建议您尝试使用 @Html.TextBoxFor(model => model.Date, new {@type = "Date"}) 并在脚本中添加如下内容：

$(function () {
    $('#Date').datepicker();
});

【讨论】：