搭建日期和时间选择器

Question

当使用下面的属性搭建模型中的视图时，它会生成呈现浏览器日期选择器的代码，效果很好。

如何搭建一个生成日期和时间选择器的属性？

[Display(Name = "Date Start")]
[DataType(DataType.Date)]
public DateTime EventStart { get; set; }

我试过了，但它不起作用。

[DataType(DataType.DateTime)]

Answer 1

您可以通过创建一个自定义的MVC并告诉EditorTemplate在[UIHint]中使用它来实现这一点。

ViewModel：

[Display(Name = "Date Start")]
[UIHint("DateTimePicker")]
public DateTime EventStart { get; set; }

Views/Shared/EditorTemplates/DateTimePicker.cshtml：

@model DateTime

<input type="text" name="@Html.NameFor(m => m)" id="@Html.IdFor(m => m)" value="@Model.ToString("o")"/>
<script type="text/javascript">
    // init the datepicker of your JS UI Framework (I am using jQuery UI here)
    $('#@Html.IdFor(m => m)').datepicker(); 
</script>

主视图中的用法：

@Html.EditorFor(m => m.EventStart)

这种方法的问题在于，您在EditorTemplate中创建的JS datepicker对象上失去了句柄。因此，如果您想要更改配置(例如，动态设置maxDate )，您必须构建额外的基础设施。

因此，我的建议是将JS datepicker直接附加到需要它的视图中，并在那里进行配置，而不是使用日期选择器的Editor模板。