日期选择器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>

我想为startdate显示一个日期选择器,为结束日期显示一个.

谢谢

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小提琴