MVC Razor DatePicker 和 TimePicker答案

【问题标题】：MVC Razor DatePicker and TimePickerMVC Razor DatePicker 和 TimePicker
【发布时间】：2013-07-18 01:11:56
【问题描述】：

我有一个由 Razor 生成的表单，允许用户编辑一些调度程序数据，并且效果很好。

我不明白，也从未见过的一件事是 Razor 自动生成的日期和时间选择器。

澄清一下，我要说的是这些：

它们都很好，但正如您在屏幕截图中看到的那样，它们不使用我的模型值。

标记本身在标签中设置了我的值，但控件会忽略它们。

这就是我的意思：

如您所见，值是在标签中设置的，但控件不尊重这些值。

我会注意到，在我的定制模型中，我的这些属性带有以下注释：

//For the dates...
[DataType(System.ComponentModel.DataAnnotations.DataType.Date)]

//For the time...
[DataType(System.ComponentModel.DataAnnotations.DataType.Time)]

我宁愿不必删除这些注释，但如果它影响我达成解决方案，我会做必须做的事情。

为了解决这个问题，我想要两件事之一：

首先阻止生成这些控件，以便我可以使用this absolutely wonderful jQuery datetimepicker addon。
强制这些控件尊重并显示从我的模型传入的值。

感谢所有建议。熟悉 MVC 的人提出的建议将不胜感激。

【问题讨论】：

标签： jquery datetime asp.net-mvc-4 razor user-controls

【解决方案1】：

使用@Html.TextBoxFor( x => x.StartDate, new { @class = "date" }) 渲染这些，并使用一些jquery 之类的$('.date').datetimepicker(); 来应用查询插件。
date 和 time 输入的值应采用 yyyy-MM-dd 和 HH:mm:ss 格式 - 这解释了为什么它们目前不适合您。我没有仔细研究过你想使用的插件，但它很可能会让你配置要使用的日期/时间格式。

【讨论】：

【解决方案2】：

我知道这已经过时了，但 Google 把我带到了这里，所以它可能也会把其他人带到这里。

如果您尚未将 datetimepicker 插件添加到您的包中，请确保在 head 部分中添加（以及 jquery 和 jquery ui，在 plugin's directions 之后）。

在您的模型中，在字段上方添加[UIHint{"DateTime")] 属性。然后，在“~/Views/Shared/EditorTemplates”文件夹中，创建一个名为“DateTime.cshtml”的文件，其内容如下：

    @model DateTime?

    @Html.TextBoxFor(Model => Model, new { @class = "date" })

    <script type="text/javascript">
        $('#@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)').datetimepicker();
    </script>

“#@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)”部分从 Razor 生成的 TextBox 中获取字段的 id。添加“日期”类是可选的，但如果您想做一些自定义样式，这会有所帮助。

【讨论】：

文件夹应该是 ~/Views/Shared/EditorTemplates/

【解决方案3】：

这是你的问题。 value="8:00 AM"

应该是：价值="08:00"

需要像下午 5:00 这样的 24 小时制需要 17:00 的值

这个不需要jquery。使用正确的值，您就可以使用标准的 html 元素。

这是我如何在 C# Razor 页面中使用它的示例。它工作得很好，可以完美地读取和写入模型。

<input type="time" id="ShiftStartTime" name="ShiftStartTime" value="@Model.ShiftStartTime.Hour.ToString("D2")@(":")@Model.ShiftStartTime.Minute.ToString("D2")" class="form-control"/>

【讨论】：