Question

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

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

结束时间日历与名称相同。这非常适合记录活动的日期和时间，我们对它非常满意。问题在于，当要编辑条目时，日历不会填充模型中的数据，因为视图中的其他元素也是如此。视图中的其他元素使用脚手架生成的HTML帮助程序，因此没有问题。我们使用DateTimes的默认选项，但此文本框输入不足以实现用户友好。

我做了一些环顾四周，似乎可以使用＆＃34; value =＆＃34;设置日历的值。 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);
    }

Answer 1

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

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

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

Answer 2

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

使用从模型传递的数据填充HTML5 Datepicker

2 个答案: