MVC4 DataType.Date EditorFor不会在Chrome中显示日期值，在Internet Explorer中也不错

Question

我在我的模型中使用DataType.Date属性，在我的视图中使用EditorFor。这在Internet Explorer 8和Internet Explorer 9中运行良好，但在Google Chrome中它显示日期选择器而不是显示值，它只是在褪色的灰色文本中显示“月/日/年”

Google Chrome为什么不显示该值？

型号：

[DataType(DataType.Date)]
public Nullable<System.DateTime> EstPurchaseDate { get; set; }

查看：

<td class="fieldLabel">Est. Pur. Date</td>
<td class="field">@Html.EditorFor(m=>m.EstPurchaseDate)</td>

Answer 1

使用[DataType(DataType.Date)]修饰模型属性时，ASP.NET MVC 4中的默认模板会生成type="date"的输入字段：

<input class="text-box single-line" 
       data-val="true" 
       data-val-date="The field EstPurchaseDate must be a date."
       id="EstPurchaseDate" 
       name="EstPurchaseDate" 
       type="date" value="9/28/2012" />

支持HTML5的浏览器，例如Google Chrome，会使用日期选择器呈现此输入字段。

为了正确显示日期，该值必须格式化为2012-09-28。引自specification：

  

值：[RFC 3339]中定义的有效完整日期，附加   年度成分为四位或更多位的资格   表示大于0的数字。

您可以使用DisplayFormat属性强制执行此格式：

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public Nullable<System.DateTime> EstPurchaseDate { get; set; }

Answer 2

在MVC5.2中，将Date.cshtml添加到文件夹〜/ Views / Shared / EditorTemplates：

@model DateTime?
@{
    IDictionary<string, object> htmlAttributes;
    object objAttributes;
    if (ViewData.TryGetValue("htmlAttributes", out objAttributes))
    {
        htmlAttributes = objAttributes as IDictionary<string, object> ?? HtmlHelper.AnonymousObjectToHtmlAttributes(objAttributes);
    }
    else
    {
        htmlAttributes = new RouteValueDictionary();
    }
    htmlAttributes.Add("type", "date");
    String format = (Request.UserAgent != null && Request.UserAgent.Contains("Chrome")) ? "{0:yyyy-MM-dd}" : "{0:d}";
    @Html.TextBox("", Model, format, htmlAttributes)
}

Answer 3

作为Darin Dimitrov回答的补充：

如果您只希望此特定行使用某种（不同于标准）格式，则可以在MVC5中使用：

@Html.EditorFor(model => model.Property, new {htmlAttributes = new {@Value = @Model.Property.ToString("yyyy-MM-dd"), @class = "customclass" } })

Answer 4

在MVC 3中，我不得不添加：

using System.ComponentModel.DataAnnotations;

添加属性时使用的

：

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

特别是如果你像我一样在.edmx文件中添加这些属性。我发现默认情况下.edmx文件没有这个使用，所以只添加propeties是不够的。

Answer 5

如果您从模型中移除[DataType(DataType.Date)]，则Chrome中的输入字段将呈现为type="datetime"，并且也不会显示日期选择器。

Answer 6

我仍然遇到了传递yyyy-MM-dd格式的问题，但我通过更改Date.cshtml解决了这个问题：

@model DateTime?

@{
    string date = string.Empty;
    if (Model != null)
    {
        date = string.Format("{0}-{1}-{2}", Model.Value.Year, Model.Value.Month, Model.Value.Day);
    }

    @Html.TextBox(string.Empty, date, new { @class = "datefield", type = "date"  })
}

Answer 7

回复 MVC4 DataType.Date EditorFor不会在Chrome中显示日期值，在IE中显示

在模型中，您需要具有以下类型的声明：

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

OR

[DataType(DataType.Date)]
public Nullable<System.DateTime> DateXYZ { get; set; }

您无需使用以下属性：

[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

在Date.cshtml上使用此模板：

@model Nullable<DateTime>
@using System.Globalization;

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

    }

    if (Request.Browser.Type.ToUpper().Contains("IE") || Request.Browser.Type.Contains("InternetExplorer"))
    {
        @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class = "datefield", type = "date" })
    }
    else
    {
        //Tested in chrome
        DateTimeFormatInfo dtfi = CultureInfo.CreateSpecificCulture("en-US").DateTimeFormat;
        dtfi.DateSeparator = "-";
        dtfi.ShortDatePattern = @"yyyy/MM/dd"; 
        @Html.TextBox("", String.Format("{0:d}", dt.ToString("d", dtfi)), new { @class = "datefield", type = "date" })
    } 
}

玩得开心！ 问候， Blerton

Answer 8

如果你需要控制日期的格式（换句话说，不仅仅是yyyy-mm-dd格式是可以接受的），另一个解决方案可能是添加一个类型为string的helper属性并添加一个日期验证器到该属性，并在UI上绑定到此属性。

    [Display(Name = "Due date")]
    [Required]
    [AllowHtml]
    [DateValidation]
    public string DueDateString { get; set; }

    public DateTime? DueDate 
    {
        get
        {
            return string.IsNullOrEmpty(DueDateString) ? (DateTime?)null : DateTime.Parse(DueDateString);
        }
        set
        {
            DueDateString = value == null ? null : value.Value.ToString("d");
        }
    }

这是一个日期验证器：

[AttributeUsage(AttributeTargets.Property, AllowMultiple = true, Inherited = true)]
public class DateValidationAttribute : ValidationAttribute
{
    public DateValidationAttribute()
    {
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        if (value != null)
        {
            DateTime date;

            if (value is string)
            {
                if (!DateTime.TryParse((string)value, out date))
                {
                    return new ValidationResult(validationContext.DisplayName + " must be a valid date.");
                }
            }
            else
                date = (DateTime)value;

            if (date < new DateTime(1900, 1, 1) || date > new DateTime(3000, 12, 31))
            {
                return new ValidationResult(validationContext.DisplayName + " must be a valid date.");
            }
        }
        return null;
    }
}