c# - 日期选择器 ASP.NET c# mvc4

Question

如何为此代码添加日期选择器:

<fieldset>
        <legend>Search criteria</legend>
        @Html.Label("StartDate", "Start Date:")
        @Html.TextBox("StartDate")
        @Html.Label("enddate", "End Date:")
        @Html.TextBox("enddate")        
        <input type="submit" value="Apply" />
    </fieldset>

我想显示一个用于开始日期的日期选择器和一个用于结束日期的日期选择器。

谢谢

Answer 1

HTML 5 解决方案

如果您打算使用 HTML 5，您可以简单地在输入上指定一个类型，如下所示:

@Html.TextBox("StartDate", Model.StartDate, new { @class = "datepicker", @type="date" })

这将呈现一个日期控件:

JSFiddle

JQuery UI 解决方案

您也可以为此使用 Jquery UI:

 <fieldset>
    <legend>Search criteria</legend>
    @Html.Label("StartDate", "Start Date:")
    @Html.TextBox("StartDate", string.Empty, new { @class = "datepicker" })
    @Html.Label("enddate", "End Date:")
    @Html.TextBox("enddate", string.Empty, new { @class = "datepicker" })        
    <input type="submit" value="Apply" />
</fieldset>

<script>
  $(function() {
    $( ".datepicker" ).datepicker();
  });
</script>

上面添加了一个 datepicker 类到 TextBox，然后运行 ​​javascript 来装饰它们。

http://jqueryui.com/datepicker/

请注意，我坚持使用 Textbox，但我会改用 TextBoxFor。

更新

请参阅下面的工作示例。

Dot Net Fiddle