如何使用输入类型 = 日期的 Html.TextBoxFor？ [复制]

Posted 2023-03-05

【中文标题】如何使用输入类型 = 日期的 Html.TextBoxFor？ [复制]

【英文标题】：How to use Html.TextBoxFor with input type=date? [duplicate]

【发布时间】：2014-09-25 01:14:04

【问题描述】：

我想在我的代码中实现。为此，我有以下几点：

@html.TextBoxFor(model => model.CreationDate, new  @type = "date" )

此代码生成以下 HTML：

<input data-val="true" data-val-date="The field CreationDate must be a date." 
             data-val-required="The CreationDate field is required." 
             id="CreationDate" name="CreationDate" type="date" 
             value="09/05/2012 15:02:19">

该值不会显示在网页上，因为 type="date" 需要 YYYY-MM-DD 格式的数据。

我尝试过格式化日期，但当然会失败。

@Html.TextBoxFor(model => model.CreationDate.ToString("YYYY-MM-DD"), 
                 new  @type = "date" )

如何使用 TextBoxFor 方法正确显示该结构？ 还是我应该使用其他方法（我已经尝试过 EditorFor 但失败了）？

CreationDate 是 DateTime 类型。

【问题讨论】：

具体来说，我倾向于使用这里提到的重载：***.com/a/13702321/534109

【参考方案1】：

模型设计：

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "0:yyyy-MM-dd", ApplyFormatInEditMode = true)]
public DateTime CreationDate get; set; 

查看设计：

<%: Html.EditorFor(m => m.CreationDate, new  @type = "date" ) %>

【参考方案2】：

将 c# 日期时间转换为 HTML-5 日期值

<input type="date" value="<%= SomeFieldDate.ToString("yyyy-MM-dd")%>"/>

【参考方案3】：

试试这个；

@Html.TextBoxFor(model => model.CreationDate,
           new  @type = "date", @Value = Model.CreationDate.ToString("yyyy-MM-dd") )

设置值时必须处理null。

或

如果你可以更改Model，你可以试试这个；

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "0:yyyy-MM-dd", ApplyFormatInEditMode = true)]
public DateTime CreationDate get; set; 

在您看来，您可以使用EditorFor 助手。

@Html.EditorFor(model => model.CreationDate, new  @type = "date" )

【讨论】：

不要使用第一个选项（在使用HtmlHelper 方法时不要设置value 属性 - 你会失去真正的 2-way 模型绑定 - 正确使用是 @Html.TextBoxFor(model => model.CreationDate, "0:yyyy-MM-dd", new type="date" ) 和第二个选项只需要@Html.EditorFor(model => model.CreationDate) - 由于[DataType(DataType.Date)] 属性，EditorFor() 方法已经添加了type="date"

无论如何，new @type = "date" 什么都不做（在MVC5.1 或更高版本中，它需要是new htmlAttributes = new type="text" ，而在较低版本中，您不能使用EditorFor() 方法添加属性。

我使用了“0:yyyy-MM-dd”上面的建议，但它不起作用。我去了答案中的版本，其中明确设置了值，并且它有效。查看在第一个版本中生成的 HTML，我可以看到 Value 不是 yyyy-MM-dd 的形式。

【参考方案4】：

我用 EditorFor 和 boostrap-datepicker 库做了类似的事情：

    <div class="input-prepend date" id="startDate" data-date=@DateTime.UtcNow data-date-format="m/d/yyyy">
        <span class="add-on"><i class="icon-calendar"></i></span>
        @Html.EditorFor(m => m.StartDate)            
    </div>