MVC4 DataType.Date EditorFor не отображает значение даты в Chrome, отлично в Internet Explorer

Question

Я использую атрибут DataType.Date для моей модели и редактора. На мой взгляд. Это отлично работает в 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

Если вы убр e [DataType(DataType.Date)] из вашей модели, поле ввода в Chrome отображается как type="datetime" и не отображает дату.

Answer 3

я все еще была проблема с его прохождения в формате 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 4

В MVC 3 я должен был добавить:

using System.ComponentModel.DataAnnotations; 

среди usings при добавлении свойства:

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

Особенно, если вы добавляете эти свойства в EDMX-файле как я. Я обнаружил, что по умолчанию файлы .edmx этого не используют, поэтому добавления только пропозиций недостаточно.

Answer 5

Ответить на MVC4 DataType.Дата EditorFor не будет отображаться значение даты в 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)] 

В D ate.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 6

В 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 7

В дополнение к ответу Дарин Димитрова:

Если вы только хочешь использовать эту линию использовать определенный (отличаются от стандартного) формата, вы можете использовать в MVC5:

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

Answer 8

Если вам нужно иметь контроль темперу верните формат даты (другими словами, допустим не только формат yyyy-mm-dd), но и другим решением может быть добавлено свойство хелпера, которое имеет строку типа, и добавить к этому свойству средство проверки даты и привязать к этому свойству в пользовательском интерфейсе.

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