MVC4 DataType.Date EditorFor n’affiche pas la valeur de date dans Chrome, bien dans Internet Explorer

J’utilise l’atsortingbut DataType.Date sur mon modèle et un EditorFor à mon avis. Cela fonctionne bien dans Internet Explorer 8 et Internet Explorer 9 , mais dans Google Chrome, il affiche un sélecteur de date et, au lieu d’afficher la valeur, il affiche simplement «Mois / Jour / Année» dans un texte gris dégradé.

Pourquoi Google Chrome n’affiche-t-il pas la valeur?

Modèle:

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

Vue:

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

Chrome

Internet Explorer

Lorsque vous décorez une propriété de modèle avec [DataType(DataType.Date)] le modèle par défaut dans ASP.NET MVC 4 génère un champ d’entrée de type="date" :

  

Les navigateurs prenant en charge HTML5 tels que Google Chrome rendent ce champ de saisie avec un sélecteur de date.

Pour afficher correctement la date, la valeur doit être au format 2012-09-28 . Citation du cahier des charges :

valeur: une date complète valide, telle que définie dans la [RFC 3339], avec la qualification supplémentaire que la composante année est composée de quatre chiffres ou plus représentant un nombre supérieur à 0.

Vous pouvez appliquer ce format à l’aide de l’atsortingbut DisplayFormat :

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

Dans MVC5.2, ajoutez Date.cshtml au dossier ~ / Views / Shared / EditorTemplates:

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

En complément de la réponse de Darin Dimitrov:

Si vous voulez seulement que cette ligne particulière utilise un certain format (différent du format standard), vous pouvez utiliser dans MVC5:

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

Dans MVC 3 je devais append:

 using System.ComponentModel.DataAnnotations; 

parmi les utilisations lors de l’ajout de propriétés:

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

Surtout si vous ajoutez ces propriétés dans un fichier .edmx comme moi. J’ai trouvé que par défaut, les fichiers .edmx n’utilisent pas cette méthode, donc il ne suffit pas d’append uniquement des propriétés.

Si vous supprimez [DataType(DataType.Date)] de votre modèle, le champ de saisie dans Chrome est affiché en tant que type="datetime" et n’affiche pas non plus le datepicker.

J’avais toujours un problème avec le passage au format aaaa-MM-jj, mais je l’ai contourné en changeant la date.cshtml:

 @model DateTime? @{ ssortingng date = ssortingng.Empty; if (Model != null) { date = ssortingng.Format("{0}-{1}-{2}", Model.Value.Year, Model.Value.Month, Model.Value.Day); } @Html.TextBox(ssortingng.Empty, date, new { @class = "datefield", type = "date" }) } 

Répondre à MVC4 DataType.Date EditorFor n’affiche pas la valeur de date dans Chrome, bien dans IE

Dans le modèle, vous devez avoir le type de déclaration suivant:

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

OU

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

Vous n’avez pas besoin d’utiliser l’atsortingbut suivant:

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

À la date.cshtml utilisez ce modèle:

 @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("", Ssortingng.Format("{0:d}", dt.ToShortDateSsortingng()), 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("", Ssortingng.Format("{0:d}", dt.ToSsortingng("d", dtfi)), new { @class = "datefield", type = "date" }) } } 

S’amuser! Cordialement, Blerton

Si vous avez besoin de contrôler le format de la date (en d’autres termes, le format aaaa-mm-jj est acceptable), une autre solution pourrait être d’append une propriété d’assistance de type chaîne et d’append un validateur de date à cette propriété. , et lier à cette propriété sur l’interface utilisateur.

  [Display(Name = "Due date")] [Required] [AllowHtml] [DateValidation] public ssortingng DueDateSsortingng { get; set; } public DateTime? DueDate { get { return ssortingng.IsNullOrEmpty(DueDateSsortingng) ? (DateTime?)null : DateTime.Parse(DueDateSsortingng); } set { DueDateSsortingng = value == null ? null : value.Value.ToSsortingng("d"); } } 

Et voici un validateur de date:

 [AtsortingbuteUsage(AtsortingbuteTargets.Property, AllowMultiple = true, Inherited = true)] public class DateValidationAtsortingbute : ValidationAtsortingbute { public DateValidationAtsortingbute() { } protected override ValidationResult IsValid(object value, ValidationContext validationContext) { if (value != null) { DateTime date; if (value is ssortingng) { if (!DateTime.TryParse((ssortingng)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; } }