Internet Explorer에서 MVC4 DataType.Date EditorFor가 Chrome에 날짜 값을 표시하지 않음

내 모델에서 DataType.Date 특성을 사용하고 있으며 뷰에서 EditorFor를 사용하고 있습니다. 이것은 Internet Explorer 8 및 Internet Explorer 9 에서 잘 작동 하지만 Chrome 에서는 날짜 선택기를 표시하고 값을 표시하는 대신 희미한 회색 텍스트로 "월 / 일 / 년"만 표시합니다.

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>

[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" />

Chrome과 같은 HTML5를 지원하는 브라우저는 날짜 선택기로이 입력 필드를 렌더링합니다.

날짜를 올바르게 표시하려면 값을 형식으로 지정해야합니다 2012-09-28. 사양 에서 인용 :

value : [RFC 3339]에 정의 된 유효한 전체 날짜. 연도 구성 요소가 0보다 큰 숫자를 나타내는 4 자리 이상의 숫자라는 추가 규정이 있습니다.

다음 DisplayFormat속성을 사용하여이 형식을 적용 할 수 있습니다 .

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

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

Darin Dimitrov의 답변 외에도

이 특정 행만 특정 (표준과는 다른) 형식을 사용하도록하려면 MVC5에서 사용할 수 있습니다.

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

MVC 3에서는 다음을 추가해야했습니다.

using System.ComponentModel.DataAnnotations;

속성을 추가 할 때 사용 중 :

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

특히 나 같은 .edmx 파일에 이러한 속성을 추가하는 경우. 기본적으로 .edmx 파일에는 이것을 사용하지 않으므로 속성 만 추가하는 것만으로는 충분하지 않습니다.

[DataType(DataType.Date)]모델에서 제거하면 Chrome의 입력 필드가 렌더링되고 type="datetime"날짜 선택기가 표시되지 않습니다.

여전히 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"  })
}

MVC4 DataType.Date 편집기에 회신 Chrome에 날짜 값이 표시되지 않고 IE에서는 잘 표시됩니다.

모델에서 다음 유형의 선언이 필요합니다.

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

또는

[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

날짜 형식을 제어해야하는 경우 (즉, yyyy-mm-dd 형식 만 허용되는 것이 아니라) 다른 솔루션은 string 유형의 도우미 속성을 추가하고 해당 속성에 날짜 유효성 검사기를 추가하는 것일 수 있습니다. 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;
    }
}