MVC 4 Razor添加输入类型日期

时间:2013-01-20 11:12:15

标签: html5 razor asp.net-mvc-4

我想知道如何为我的模型的datetime属性插入<input type="date"/>。 至于现在,Razor使用type="datetime"创建一个普通的输入元素。我想使用HTML5的新输入类型。

5 个答案:

答案 0 :(得分:39)

输入日期值格式需要按照http://tools.ietf.org/html/rfc3339#section-5.6完整日期指定的日期。

所以我最终做了:

<input type="date" id="last-start-date" value="@string.Format("{0:yyyy-MM-dd}", Model.LastStartDate)" />

我确实试过“正确”使用:

[DataType(DataType.Date)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
public DateTime LastStartDate
{
    get { return lastStartDate; }
    set { lastStartDate = value; }
}

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

不幸的是,似乎总是将输入的value属性设置为标准日期时间,所以我最终直接应用了上面的格式。

修改

根据Jorn的说法,如果你使用

@Html.EditorFor(model => model.LastStartDate)

而不是TextBox For It一切正常。

答案 1 :(得分:31)

我设法通过使用以下代码来完成。

@Html.TextBoxFor(model => model.EndTime, new { type = "time" })

答案 2 :(得分:1)

 @Html.TextBoxFor(m => m.EntryDate, new{ type = "date" })

 or type = "time"

 it will display a calendar
 it will not work if you give @Html.EditorFor()

答案 3 :(得分:1)

如果要使用@ Html.EditorFor(),则必须使用jQuery ui和 使用NuGet软件包管理器将Asp.net Mvc更新到5.2.6.0。

@Html.EditorFor(m => m.EntryDate, new { htmlAttributes = new { @class = "datepicker" } })

@section脚本{

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

<script>

    $(document).ready(function(){

      $('.datepicker').datepicker();

     });

</script>

}

答案 4 :(得分:-3)

您将通过标签类型=&#34;日期&#34; ...然后它将呈现漂亮的日历和所有...

overflow