MVC4 DataType.Date EditorFor n'affichera pas la valeur de date dans Chrome, très bien dans Internet Explorer

J'utilise l'attribut 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" en texte gris délavé.

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

Modèle:

[DataType(DataType.Date)]
public Nullable<System.DateTime> EstPurchaseDate { get; set; }

Vue:

<td class="fieldLabel">Est. Pur. Date</td>
<td class="field">@Html.EditorFor(m=>m.EstPurchaseDate)</td>

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":

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

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

Pour afficher correctement la date, la valeur doit être formatée en tant que 2012-09-28. Citation de la spécification :

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

Vous pouvez appliquer ce format en utilisant l' DisplayFormatattribut:

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

Dans MVC5.2, ajoutez Date.cshtml au dossier ~ / 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)
}

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

Si vous souhaitez 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 {htmlAttributes = new {@Value = @Model.Property.ToString("yyyy-MM-dd"), @class = "customclass" } })

Dans MVC 3, j'ai dû ajouter:

using System.ComponentModel.DataAnnotations;

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

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{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 ne l'ont pas en utilisant donc ajouter seulement des propriétés n'est pas suffisant.

Si vous supprimez [DataType(DataType.Date)]de votre modèle, le champ de saisie dans Chrome est rendu comme type="datetime"et n'affichera pas non plus le sélecteur de date.

J'ai toujours eu un problème avec le passage du format aaaa-MM-jj, mais je l'ai contourné en modifiant le 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"  })
}

Répondre à MVC4 DataType.Date EditorFor n'affichera pas la valeur de date dans Chrome, très 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<System.DateTime> DateXYZ { get; set; }

Vous n'avez pas besoin d'utiliser l'attribut suivant:

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

Au Date.cshtml utilisez ce modèle:

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

S'amuser! Cordialement, Blerton

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

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

Et voici un validateur de 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;
    }
}