2

在我的 ASP.NET MVC4 应用程序中，我有一个包含“from”和“to”字段的视图，为此我使用了 JQuery UI DatePicker 控件。我正在使用 HtmlHelper 来构建我的表单，如以下代码所示：

<p>
    @Html.LabelFor(x => x.CustomerId)
    @Html.DropDownListFor(x => x.CustomerId, new SelectList(Model.Customers, "Id", "Name"))
    <span class="datePicker">
        @Html.LabelFor(x => x.FromDate)
        @Html.EditorFor(x => x.FromDate)
    </span>
    <span class="datePicker">
        @Html.LabelFor(x => x.ToDate)
        @Html.EditorFor(x => x.ToDate)
    </span>
</p>
<p>
    @Html.LabelFor(x => x.IsActiveOnly)
    @Html.CheckBoxFor(x => x.IsActiveOnly)
</p>

在模型上，我对两个 DateTime 属性使用[DataType(DataType.Date)]and[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]属性，这会在 Chrome 中正确呈现 DatePicker - 但没有默认值 - 但不能在 IE 或 FF中。

有没有办法使用 HtmlHelper（或使用最少的 JS）在所有 3 个浏览器中显示 DatePicker？

4

1 回答 1

1

为什么不将datePicker类设置为 texboxes 将其传递给TextBoxFor方法的 objectHtml 属性

@Html.TextBoxFor(model => model.FromDate, "{0:d}", new {  @class = "datePicker"})

编辑 ：

以上述解决方案为例

@model MvcApplication3.Models.MVCTEST2
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.10.1.custom.js" type="text/javascript"></script>
<link href="../../Content/jquery-ui-1.10.1.custom.min.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery-ui-1.10.1.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(document).ready(function () {
         $(".datePicker").datepicker();
    })
</script>
<title>Index</title>
</head>
<body>
<div>
    @Html.TextBoxFor(model => model.FromDate, "{0:d}", new { @class = "datePicker" })
</div>
</body>
</html>

在 IE FF 和 GC 上测试

于 2013-02-26T05:42:52.110 回答