日期選擇器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小提琴

Answer 2

MVC有一個內置類datefield字段，在進入該字段時，將打開一個允許它們選擇日期的模塊。

<fieldset>
    <legend>Search criteria</legend>
    @Html.LabelFor( model => Model.StartDate, "Start Date:")
    @Html.TextBoxFor( model => Model.StartDate, new {@class = "datefield"})
    @Html.LabelFor( model => Model.EndDate, "End Date:")
    @Html.TextBoxFor( model => Model.EndDate, new {@class = "datefield"})        
    <input type="submit" value="Apply" />
</fieldset>

那應該解決它。

使用有人提到datepicker通過JQueryUI ，但datefield是我相信在微軟的MVC原生支持

Answer 3

正如Hutchonoid所說的那樣。 如果要進行模型鏈接，可以使用TextBoxFor執行以下操作：

@Html.TextBoxFor(model => model.StartDate, new { @class="datefield", @type="date" })

將您傳入的HTML屬性對象中的類型作為第二個參數包含在TextBoxFor中非常重要，否則它將不會創建日期的輸入類型，它將保留為文本框。

希望這有助於某人。 :-)

Answer 4

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

那應該解決它。

Answer 5

這是適合我的代碼：

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/themes/base/css")

    <script type="text/javascript">
        $(document).ready(function () {
            $("#Dob").datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
    </script>
}