ASP.NET MVC 如何使用模型属性的日期填充日期选择器的编辑器答案

【问题标题】：ASP.NET MVC How to populate an editorfor date picker with the date of a model's propertyASP.NET MVC 如何使用模型属性的日期填充日期选择器的编辑器
【发布时间】：2015-06-24 21:16:44
【问题描述】：

我有一个网站，我在 ASP.NET 中创建一个具有 MVC 结构的网站，总体上喜欢通过 Web 表单从数据库创建和显示数据的效率。但是，我遇到的问题是 Razor 和 EditorFor 助手。我知道他们最近添加了发送 HTML 属性的功能，我已将其与 Bootstrap 的日期选择器一起使用，以获得更友好的输入系统。但是，我找不到使用现有记录的 model.Sale.Date 将 EditorFor 填充到字段中的方法（就像我使用 DropDownListFor 助手所做的那样）。

 @Html.LabelFor(model => model.Sale.Date, new { @class = "control-label" })&nbsp;
 @Html.EditorFor(model => model.Sale.Date, new { @class = "form-control datepicker", placeholder = "Pick a date" })&nbsp;
 @Html.ValidationMessageFor(model => model.Sale.Date, "", new { @class = "text-danger" })&nbsp;

 @Html.LabelFor(model => model.Employee.FullName, htmlAttributes: new { @class = "control-label" })&nbsp;
 @Html.DropDownListFor(model => model.Employee.Id, new SelectList(Model.Employees.Employees, "Id", "FullName", Model.Sale.EmployeeId))&nbsp;
 @Html.ValidationMessageFor(model => model.Employee.Id, "", new { @class = "text-danger" })&nbsp;

 @Html.LabelFor(model => model.Service.Description, htmlAttributes: new { @class = "control-label" })&nbsp;
 @Html.DropDownListFor(model => model.Service.Id, new SelectList(Model.Services.Services, "Id", "Description", Model.Sale.ServiceId), null, null)&nbsp;
 @Html.ValidationMessageFor(model => model.Service.Id, "", new { @class = "text-danger" })&nbsp;

有没有人知道如何以最简单的方式完成此任务？

【问题讨论】：

日期自动填充 Safari 中的编辑器，因为引导日期选择器未正确加载。但是，在 Chrome 中，引导日期选择器正在加载并且不会显示自动填充的日期..
有什么理由你必须使用@Html.EditorFor 而不仅仅是使用@Html.Textboxfor ...还要记住日期的数据属性应该是[DataType(DataType.Date)]（如果它还没有）
我已经在 ViewModel 中将其设置为 [DateType(DataType.Date)]。我只使用了 EditorFor，因为日期选择器的引导 css 类可以与 EditorFor 一起正常工作。有没有一种简单的方法来使用 TextBoxFor 进行填充？
我的印象是，通过设置属性会自动将 Textboxfor 输入设置为类型 date ，我想我错了。我通常使用textboxfor，然后使用引导日期选择器添加类.date。

标签： c# html asp.net asp.net-mvc razor

【解决方案1】：

您可以使用JQueryui 库并使用DatePicker more info

它有很多功能，您可以在 Razor 视图中轻松实现这些功能。您的代码将如下所示：

 @Html.JQueryUI().DatepickerFor(model => model.SaleDate, new { @class = "form-control" })
 @Html.ValidationMessageFor(model => model.SaleDate)

【讨论】：

感谢JQueryUI的建议，我已将它添加到项目中，有时间会尝试使用它。
这是一个很棒的库，对 JQuery 友好，并且有很多你可以探索的特性。如果您在代码中经常使用时间操作，我还推荐使用 library timejs。
我不同意，我认为 jquery ui 很糟糕，并且按日期通过了销售。你会得到很多你可能永远不会在应用程序中找到的东西。还应该注意，@Html.JQueryUI 帮助器不是 default 。我假设它是 this 的一部分
是的，今天早些时候我尝试了 JQueryUI 功能时无法快速实现它，并且仍在寻找一个优雅的解决方案。
@Alundrathedreamwalker 我收回了。 jquery ui 其实真的很好。我不知道为什么，但出于某种原因，我的印象是即使您只需要其中一个，您也必须下载所有组件。在某些情况下，我可以看到其他库对于某些功能会更好，但它确实有一些好东西

【解决方案2】：

我这样解决这个问题： <input id="FechaCita" name="FechaCita" type="date" class="form-control mr-2" min="@Model.SetUpMinMax.ToString("yyyy-MM-dd")" value="@Model.FechaCita.ToString("yyyy-MM-dd")" />

当我在网络浏览器的控制台中进行测试时，我发现浏览器中包含日期的格式与我使用的不同，因此我更改了格式以查看并且一切正常

但是当我必须使用任务而不是剃刀的@html助手时，因为它再次传递了发送的格式。我可以使用注释格式，但我用英文保存我的日期，所以我让它这样。

【讨论】：