日期选择器 ASP.NET c# mvc4

Posted 2023-05-07

【中文标题】日期选择器 ASP.NET c# mvc4

【英文标题】：Date picker 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>

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

谢谢

【参考方案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>