MVC4 DataType.Date EditorFor sẽ không hiển thị giá trị ngày trong Chrome, tốt trong Internet Explorer

Tôi đang sử dụng thuộc tính DataType.Date trên mô hình của mình và EditorFor trong chế độ xem của tôi. Điều này hoạt động tốt trong Internet Explorer 8 và Internet Explorer 9 , nhưng trong Google Chrome, nó đang hiển thị trình chọn ngày và thay vì hiển thị giá trị, nó chỉ hiển thị "Tháng / Ngày / Năm" bằng văn bản màu xám mờ.

Tại sao Google Chrome không hiển thị giá trị?

Mô hình:

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

Lượt xem:

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

Khi bạn trang trí một thuộc tính mô hình bằng [DataType(DataType.Date)]mẫu mặc định trong ASP.NET MVC 4 sẽ tạo trường nhập 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" />

Các trình duyệt hỗ trợ HTML5 như Google Chrome sẽ hiển thị trường nhập này bằng công cụ chọn ngày.

Để hiển thị chính xác ngày, giá trị phải được định dạng là 2012-09-28. Trích dẫn từ đặc điểm kỹ thuật :

value: Một ngày đầy đủ hợp lệ như được định nghĩa trong [RFC 3339], với tiêu chuẩn bổ sung rằng thành phần năm là bốn hoặc nhiều chữ số đại diện cho một số lớn hơn 0.

Bạn có thể thực thi định dạng này bằng cách sử dụng DisplayFormatthuộc tính:

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

Trong MVC5.2, thêm Date.cshtml vào thư mục ~ / Lượt xem / Chia sẻ / Trình soạn thảo:

@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)
}

Như một bổ sung cho câu trả lời của Darin Dimitrov:

Nếu bạn chỉ muốn dòng cụ thể này sử dụng một định dạng nhất định (khác với tiêu chuẩn), bạn có thể sử dụng trong MVC5:

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

Trong MVC 3 tôi đã phải thêm:

using System.ComponentModel.DataAnnotations;

trong số các cách sử dụng khi thêm thuộc tính:

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

Đặc biệt nếu bạn đang thêm các thuộc tính này trong tệp .edmx như tôi. Tôi thấy rằng theo mặc định, các tệp .edmx không có điều này bằng cách sử dụng nên chỉ thêm các thủ tục là không đủ.

Nếu bạn xóa [DataType(DataType.Date)]khỏi mô hình của mình, trường đầu vào trong Chrome sẽ được hiển thị dưới dạng type="datetime"và sẽ không hiển thị trình đo ngày.

Tôi vẫn gặp sự cố với việc chuyển định dạng yyyy-MM-dd, nhưng tôi đã khắc phục bằng cách thay đổi 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"  })
}

Trả lời MVC4 DataType.Date EditorFor sẽ không hiển thị giá trị ngày trong Chrome, tốt trong IE

Trong Mô hình, bạn cần có loại khai báo sau:

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

HOẶC LÀ

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

Bạn không cần sử dụng thuộc tính sau:

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

Tại Date.cshtml sử dụng mẫu này:

@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" })
    } 
}

Chúc vui vẻ! Trân trọng, Blerton

Nếu bạn cần kiểm soát định dạng của ngày (nói cách khác, không chỉ định dạng yyyy-mm-dd có thể chấp nhận được), một giải pháp khác có thể là thêm thuộc tính của trình trợ giúp thuộc loại chuỗi và thêm trình xác thực ngày vào thuộc tính đó và liên kết với tài sản này trên 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");
        }
    }

Và đây là một trình xác nhận ngày:

[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;
    }
}