使用从模型传递的数据填充 HTML5 日期选择器答案

【问题标题】：Populating HTML5 Datepicker With Data Passed From A Model使用从模型传递的数据填充 HTML5 日期选择器
【发布时间】：2014-12-05 05:17:37
【问题描述】：

我正在为一个项目制作一个基本的日程安排应用程序。我们实现了一个简单的日期时间选择器，以简化为我们的活动选择开始和结束时间/日期的过程。源代码是：

<input type="datetime-local" name="starttime" id="field1" />

除了名称之外，结束时间日历是相同的。这对于获取事件的日期和时间非常有效，我们对此感到非常满意。问题在于，当要编辑条目时，日历不会像视图中的其他元素那样填充模型中的数据。视图中的其他元素正在使用通过构建项目生成的 HTML 帮助器，因此没有问题。我们会为 DateTimes 使用默认选项，但是对此的文本框输入被认为不够用户友好，无法实现。

我环顾四周，似乎可以使用“value =”设置日历的值。 Razor 语法似乎是可能的选择，但由于 Html 助手正在处理其他元素，因此我没有参考框架。谁能澄清如何最好地解决这个问题？我已将关联控制器的编辑部分包含在内以供参考。

 public ActionResult Edit(int? id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        Request request = db.Requests.Find(id);
        if (request == null)
        {
            return HttpNotFound();
        }
        ViewBag.AccountId = new SelectList(db.Accounts, "Id", "FirstName", request.AccountId);
        ViewBag.RoomId = new SelectList(db.Rooms, "Id", "Id", request.RoomId);
        return View(request);
    }

【问题讨论】：

使用 html 帮助器生成 HTML5 日期选择器有什么问题（或者您不知道该怎么做）？
不幸的是我没有。我们正在完成这个项目，日历的实现是我们想要添加的一个额外功能。如果不出意外，我们可以使用带有提示的文本框输入。
我已经添加了一个答案，向您展示如何使用 @Html.TextBoxFor() 并添加正确的格式和 html 属性来呈现浏览器日期选择器
谢谢！效果非常好。

标签： javascript asp.net-mvc html razor

【解决方案1】：

您可以使用标准助手来呈现 HTML5 日期选择器（并且您可以获得模型绑定和不显眼的验证的好处）。假设你的模型有属性public DateTime StartTime { get; set; }，那么

@Html.TextBoxFor(m => m.StartTime, "{0:s}", new { @type = "datetime-local" })

或使用普通格式"{0:yyyy-MM-ddTHH:mm:ss}"

【讨论】：

【解决方案2】：

Stephen 的答案可能最适合您当前的设置，您可以这样做的另一种方法是使用 JQuery + UI，这也将为您提供更好的 GUI 来使用。使用 JQ，您现在可以找到日期选择器句柄并修改值。这里有一些解释：https://code.msdn.microsoft.com/Using-the-jQuery-UI-e420f255

【讨论】：