L'éditeur de type de données MVC4 DataType.Date EditorFor n'affiche pas la valeur de la date dans Chrome, mais fonctionne bien dans Internet Explorer.

Question

J'utilise l'attribut DataType.Date sur mon modèle et un EditorFor dans ma vue. Cela fonctionne bien dans Internet Explorer 8 y Internet Explorer 9 mais en 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; }

Voir :

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

Answer 1

Lorsque vous décorez une propriété de modèle avec [DataType(DataType.Date)] le modèle par défaut d'ASP.NET MVC 4 génère un champ de saisie de type 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 qui prennent en charge HTML5, comme Google Chrome, rendent ce champ de saisie avec un sélecteur de date.

Afin d'afficher correctement la date, la valeur doit être formatée comme suit 2012-09-28 . Citation du spécification :

valeur : Une date complète valide telle que définie dans [RFC 3339], avec l'ajout de l'information suivante supplémentaire que l'année est composée de quatre chiffres ou plus représentant un nombre supérieur à 0.

Vous pouvez faire respecter ce format en utilisant l'option DisplayFormat attribut :

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

Answer 2

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 le fichier .edmx comme moi. J'ai constaté que par défaut, les fichiers .edmx n'ont pas cette utilisation et que l'ajout des propriétés n'est pas suffisant.

Answer 3

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

Answer 4

J'avais toujours un problème avec le format yyyy-MM-dd, mais je l'ai contourné en modifiant le fichier 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 5

Répondre à MVC4 DataType.Date EditorFor n'affiche pas la valeur de la date dans Chrome, mais fonctionne 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)]

À la Date.cshtml utiliser 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" })
    } 
}

Amusez-vous bien ! Salutations, Blerton