日期选择器ASP.NET c#mvc4

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

<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>

搜索条件
@标签（“开始日期”，“开始日期：”）
@Html.TextBox（“开始日期”）
@标签（“结束日期”，“结束日期：”）
@Html.TextBox（“结束日期”）

我想为startdate显示一个日期选择器，为end date显示一个日期选择器

---

谢谢

HTML5解决方案

如果您打算使用HTML 5，只需在输入上指定一个类型，如下所示：

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

它将呈现一个日期控件：

JQuery用户界面解决方案

您还可以使用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>

搜索条件
@标签（“开始日期”，“开始日期：”）
@TextBox（“StartDate”，string.Empty，new{@class=“datepicker”}）
@标签（“结束日期”，“结束日期：”）
@TextBox（“enddate”，string.Empty，new{@class=“datepicker”}）
$（函数（）{
$（“.datepicker”）.datepicker（）；
});

上面向文本框添加了一个

datepicker

类，然后运行javascript来修饰它们

请注意，我一直坚持使用Textbox，但我会改用Textbox

更新

请参见下面的工作示例

---

MVC有一个内置类

日期字段

，在输入该字段时，它将打开一个模块，允许用户选择日期

<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>

搜索条件
@LabelFor（model=>model.StartDate，“开始日期：”）
@Html.TextBoxFor（model=>model.StartDate，new{@class=“datefield”}）
@LabelFor（model=>model.EndDate，“结束日期：”）
@Html.TextBoxFor（model=>model.EndDate，新的{@class=“datefield”}）

这应该可以解决问题

---

有人提到通过

JQueryUI

使用

datepicker

，但是

datefield

是我认为微软MVC中本机支持的东西，正如Hutchonoid所说的那样。如果要进行模型链接，请使用TextBoxFor执行以下操作：

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

在HTML属性对象中包含类型是很重要的，您可以将该类型作为第二个参数传递给textbox，否则它将不会创建日期的输入类型，并且它将保持为textbox

希望这能帮到别人。：-）

搜索条件
@标签（“开始日期”，“开始日期：”）
@TextBox（“StartDate”，string.Empty，new{@class=“datepicker”}）
@标签（“结束日期”，“结束日期：在此处输入代码”）
@TextBox（“enddate”，string.Empty，new{@class=“datepicker”}）
$（函数（）{
$（“.datepicker”）.datepicker（）；
});

---

这应该可以解决问题。

这是对我有效的代码：

@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>
}

@节脚本{
@Scripts.Render（“~/bundles/jqueryval”）
@Scripts.Render（“~/bundles/jqueryui”）
@style.Render（“~/Content/themes/base/css”）
$（文档）.ready（函数（）{
$（“#Dob”）.日期选择器({
变化月：对，
变化年：对
});
});
}

Model.StartDate和Model.ENDdate在我的代码中不被VS接受：/@BesaNeziri我已经更新了答案，以便在没有强键入的情况下使用。这对你现在有用，但仍然不起作用。你认为这可能是因为这个文本框不仅仅代表日期，还代表时间吗？或者可能是因为这个文本框是从另一个视图连接到它的：@Html.ActionLink（“，”列表“，”卡片“，”new{startdate=DateTime.Today.date，enddate=DateTime.Today.date.AddDays（7）}，null）@BesaNeziri请参见上面更新链接中的工作示例。嗨，上述方法行不通。您正在文本字段中指定类。它将在文本框中输出{class=datefield}。您需要@Html.TextBox（“StartDate”，string.Empty，new{@class=“datefield”}），但我也无法让它工作。如果有机会，请更新，这看起来是一个很好的答案，我希望在将来使用。我需要在有机会时编辑我的回复，@hutchonoid是正确的-它应该是

TextBoxFor

。我将检查依赖项，以确保这不是JQuery/Foundation/Bootstrap问题。我使用TextBox使其正常工作，问题出在@bundles上，我需要更改其位置，将其放在文件的第一行。太棒了。很高兴你找到了解决办法@BesaNeziri

@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>
}