0

如何从 MVC4 razor 视图中的日期时间类型以 HTML5、ISO-8601 的正确格式返回日期，这将与 HTML5 日期字段一起使用并允许非 html5 浏览器的 jquery datepicker。

我以这篇文章为基础，并按照文章中引用的方式访问了jsfiddle 。我只能让 jquery 日期选择器或 html5 日期选择器不能同时工作。

使用 jsfiddle javascript 并将我的 date.cshtml 文件修改为 @model Nullable 时，我将其关闭

 @{
    DateTime dt = DateTime.Now;
    if (Model != null)
    {
       dt  = (System.DateTime) Model;

    }
    @Html.TextBox("", String.Format("{0:yyyy-MM-dd}", dt), new { @class = "datefield", type = "date"  })
}

有了这个 HTML5 日期选择器可以工作，但对于 2012-12-28 的日期，非 html5 中的数据字段显示 0/28/2013。当我将格式更改为 MM/dd/yyyy 时，HTML5 日期选择器停止工作并显示默认的 mm/dd/yyyy 文本。无论如何让他们都工作？

4

2 回答 2

0

我在模型中使用数据注释取得了成功：

[DataType(DataType.Date)]
[Display(Name = "The Date")]
public DateTime? TheDate { get; set; }

和我认为的JQueryUIHelpers包：

@Html.JQueryUI().DatepickerFor(model => model.TheDate, new {type="date"})
于 2013-07-03T19:48:48.300 回答
0

事实证明，问题出在 jsfiddle 中的 javascript 上。我对控制台进行了一些日志记录，发现在创建新日期之前一切都很好。由于我无法弄清楚为什么日期被设置为明年，我发布了另一个问题。当您执行新日期时，您必须为该月减去一个日期。

最终代码在这里：

模型：

[DataType(DataType.Date)] 
public DateTime? ArrivalScene { get; set; }

日期.cshtml：

@model Nullable<DateTime>

 @{
    DateTime dt = DateTime.Now;
    if (Model != null)
    {
       dt  = (System.DateTime) Model;

    }

    @Html.TextBox("", String.Format("{0:yyyy-MM-dd}", dt), new { @class = "datefield", type = "date"  })
}

DatePickerReady.js：

$(function () {
    var datefields = $("input[type='date']");


    if (!Modernizr.inputtypes.date) {
        datefields
            .datepicker()
            .each(function () {
                 //Turn ISO 8601 date string into US date string
                var dateParts = this.value.split("-"),
                    date = $.map(dateParts, function (el) {
                        return !isNaN(parseInt(el, 10)) ? el : null;
                    }).length === 3
                        ? new Date(dateParts[0], dateParts[1] -1, dateParts[2])
                        : null;

                this.type = "text";
                this.value = !date ? "" :
                    (date.getMonth()+1) + "/" +
                    date.getDate() + "/" +
                    date.getFullYear();
            });
    }
});
于 2013-07-05T15:48:54.600 回答