MVC4 DataType Date EditorFor won t display date value in Chrome fine in Internet Explorer

Question

I m using the DataType Date attribute on my model and an EditorFor in my view  This is working fine in Internet nbsp Explorer nbsp 8 and Internet nbsp Explorer nbsp 9  but in Google Chrome it is showing a date picker and instead of displaying the value it just displays  Month Day Year  in faded gray text   Why won t Google Chrome display the value   Model    DataType DataType Date   public Nullable lt System DateTime gt  EstPurchaseDate   get  set      View    lt td class  fieldLabel  gt Est  Pur  Date lt  td gt   lt td class  field  gt  Html EditorFor m  gt m EstPurchaseDate  lt  td gt

User · Answer

In MVC5 2  add Date cshtml to folder   Views Shared EditorTemplates    model DateTime         IDictionary lt string  object gt  htmlAttributes      object objAttributes      if  ViewData TryGetValue  htmlAttributes   out objAttributes                 htmlAttributes   objAttributes as IDictionary lt string  object gt     HtmlHelper AnonymousObjectToHtmlAttributes objAttributes             else               htmlAttributes   new RouteValueDictionary              htmlAttributes Add  type    date        String format    Request UserAgent    null  amp  amp  Request UserAgent Contains  Chrome        0 yyyy-MM-dd       0 d         Html TextBox     Model  format  htmlAttributes

User · Answer

If you remove  DataType DataType Date   from your model  the input field in Chrome is rendered as type  datetime  and won t show the datepicker either

User · Answer

Reply to MVC4 DataType Date EditorFor won t display date value in Chrome  fine in IE  In the Model you need to have following type of declaration    DataType DataType Date   public DateTime  DateXYZ   get  set      OR   DataType DataType Date   public Nullable lt System DateTime gt  DateXYZ   get  set      You don t need to use following attribute    DisplayFormat DataFormatString     0 yyyy-MM-dd    ApplyFormatInEditMode   true     At the Date cshtml use this template    model Nullable lt DateTime gt   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                Have fun  Regards  Blerton

User · Answer

When you decorate a model property with  DataType DataType Date   the default template in ASP NET MVC 4 generates an input field of type  date     lt 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    gt    Browsers that support HTML5 such Google Chrome render this input field with a date picker   In order to correctly display the date  the value must be formatted as 2012-09-28  Quote from the specification      value  A valid full-date as defined in  RFC 3339   with the additional   qualification that the year component is four or more digits   representing a number greater than 0    You could enforce this format using the DisplayFormat attribute    DataType DataType Date    DisplayFormat DataFormatString     0 yyyy-MM-dd    ApplyFormatInEditMode   true   public Nullable lt System DateTime gt  EstPurchaseDate   get  set

User · Answer

If you need to have control over the format of the date  in other words not just the yyyy-mm-dd format is acceptable   another solution could be adding a helper property that is of type string and add a date validator to that property  and bind to this property on 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                      And here is a date validator    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  lt  new DateTime 1900  1  1     date  gt  new DateTime 3000  12  31                                 return new ValidationResult validationContext DisplayName     must be a valid date                                     return null

User · Answer

As an addition to Darin Dimitrov s answer   If you only want this particular line to use a certain  different from standard  format  you can use in MVC5    Html EditorFor model   gt  model Property  new  htmlAttributes   new   Value    Model Property ToString  yyyy-MM-dd     class    customclass

User · Answer

In MVC 3 I had to add    using System ComponentModel DataAnnotations    among usings when adding properties     DataType DataType Date    DisplayFormat DataFormatString     0 yyyy-MM-dd    ApplyFormatInEditMode   true     Especially if you are adding these properties in  edmx file like me  I found that by default  edmx files don t have this using so adding only propeties is not enough

User · Answer

I still had an issue with it passing the format yyyy-MM-dd  but I got around it by changing the 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

[asp.net-mvc] MVC4 DataType.Date EditorFor won't display date value in Chrome, fine in Internet Explorer

Examples related to asp.net-mvc

Examples related to asp.net-mvc-4

Examples related to editorfor