日期选择器 ASP.NET c# mvc4答案

【问题标题】：Date picker ASP.NET c# mvc4日期选择器 ASP.NET c# mvc4
【发布时间】：2014-10-09 03:09:37
【问题描述】：

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

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

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

谢谢

【问题讨论】：

标签： c# asp.net-mvc asp.net-mvc-4 datepicker asp.net-mvc-5

【解决方案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>

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

http://jqueryui.com/datepicker/

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

更新

请参阅下面的工作示例。

Dot Net Fiddle

【讨论】：

Model.StartDate 和 Model.ENDdate 在我的代码中不被 VS 接受：/
@BesaNeziri 我已经更新了没有强类型的使用答案。现在对你有用。
还是不行。您是否认为文本框不仅用于日期，还用于时间？
或者可能是因为这个文本框从另一个视图连接到这个：@Html.ActionLink("", "List", "Card", new { startdate = DateTime.Today.Date, enddate = DateTime.Today.Date.AddDays(7)}, null)
@BesaNeziri 请参阅上面更新链接中的工作示例。

【解决方案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>

应该可以解决的。

有人提到通过JQueryUI 使用datepicker，但datefield 是我相信微软的MVC 原生支持的东西

【讨论】：

您好，以上方法无效。您正在文本字段中指定类。它将在文本框中输出 { class= datefield }。您需要 @Html.TextBox("StartDate", string.Empty, new {@class= "datefield"}) 但我也无法让它工作。 dotnetfiddle.net/x0CqoN如果有机会请更新，看起来不错的答案我想在将来使用它。
有机会我需要编辑我的回复，@hutchonoid 是正确的——应该是TextBoxFor。我将检查依赖项以确保这不是 JQuery/Foundation/Bootstrap 的事情。
我让它与 TextBox 一起工作，问题出在@bundles 我需要更改它的位置，将它放在文件的第一行上方。
太棒了。很高兴您找到了解决方案@BesaNeziri

【解决方案3】：

就像 Hutchonoid 所说的补充一点。如果您想进行模型链接，您可以使用 TextBoxFor 执行以下操作：

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

在您作为第二个参数传递给 TextBoxFor 的 HTML 属性对象中包含类型很重要，否则它将不会创建日期的输入类型，它将保持为文本框。

希望这可以帮助某人。 :-)

【讨论】：

【解决方案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>

应该可以解决的。

【讨论】：

【解决方案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>
}

【讨论】：