MVC4 DataType.Date EditorFor non mostrerà il valore della data in Chrome, bene in Internet Explorer

Sto usando l’attributo DataType.Date sul mio modello e un EditorFor a mio avviso. Funziona perfettamente con Internet Explorer 8 e Internet Explorer 9 , ma in Google Chrome mostra una selezione data e invece di visualizzare il valore mostra solo “Mese / Giorno / Anno” in testo grigio sfumato.

Perché Google Chrome non visualizza il valore?

Modello:

[DataType(DataType.Date)] public Nullable EstPurchaseDate { get; set; } 

Vista:

 Est. Pur. Date @Html.EditorFor(m=>m.EstPurchaseDate) 

Cromo

    Internet Explorer

    Quando si decora una proprietà del modello con [DataType(DataType.Date)] il modello predefinito in ASP.NET MVC 4 genera un campo di input di type="date" :

      

    I browser che supportano HTML5 come Google Chrome rendono questo campo di input con un selettore di date.

    Per visualizzare correttamente la data, il valore deve essere formattato come 2012-09-28 . Citazione dalla specifica :

    valore: un full-date valido come definito in [RFC 3339], con la qualifica aggiuntiva che la componente dell’anno è di quattro o più cifre che rappresentano un numero maggiore di 0.

    È ansible applicare questo formato utilizzando l’attributo DisplayFormat :

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

    In MVC5.2, aggiungi Date.cshtml alla cartella ~ / Views / Shared / EditorTemplates:

     @model DateTime? @{ IDictionary htmlAttributes; object objAttributes; if (ViewData.TryGetValue("htmlAttributes", out objAttributes)) { htmlAttributes = objAttributes as IDictionary ?? 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) } 

    In aggiunta alla risposta di Darin Dimitrov:

    Se si desidera che questa particolare riga utilizzi un determinato formato (diverso dal normale), è ansible utilizzare in MVC5:

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

    In MVC 3 ho dovuto aggiungere:

     using System.ComponentModel.DataAnnotations; 

    tra gli usi quando si aggiungono le proprietà:

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

    Soprattutto se si aggiungono queste proprietà nel file .edmx come me. Ho trovato che per impostazione predefinita i file .edmx non hanno questa funzione, quindi aggiungere solo le propties non è sufficiente.

    Se rimuovi [DataType(DataType.Date)] dal tuo modello, il campo di immissione in Chrome viene visualizzato come type="datetime" e non mostrerà neanche il datepicker.

    Ho ancora avuto un problema con il passaggio del formato yyyy-MM-dd, ma ho avuto a che fare cambiando il 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" }) } 

    Rispondi a MVC4 DataType.Date EditorFor non mostrerà il valore della data in Chrome, bene in IE

    Nel modello è necessario avere il seguente tipo di dichiarazione:

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

    O

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

    Non è necessario utilizzare il seguente attributo:

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

    Al Date.cshtml usa questo modello:

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

    Divertiti! Saluti, Blerton

    Se è necessario avere il controllo sul formato della data (in altre parole, non solo il formato aaaa-mm-g è accettabile), un’altra soluzione potrebbe aggiungere una proprietà helper che è di tipo stringa e aggiungere un validatore di data a quella proprietà e associare a questa proprietà sull’interfaccia utente.

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

    Ed ecco un validatore di date:

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