web-dev-qa-db-fra.com

Le champ doit être une date - la validation de DatePicker échoue dans Chrome - mvc

J'ai un problème étrange. Ma validation de date ne fonctionne pas dans Chrome. J'ai essayé ça réponds mais ça n'a pas marché pour moi.

J'ai ceci dans mon modèle:

[Display(Name = "Date")]
[DataType(DataType.Date)]
public DateTime Date { get; set; }

Mon avis:

<div class="editor-field">
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)
</div>

$(document).ready(function () {
    $('.picker').datepicker({
        dateFormat: 'dd.mm.yy',
        changeMonth: true,
        changeYear: true,
        selectOtherMonths: true
    });
});

Tout fonctionne dans Opera et Firefox mais Chrome n'aime pas ce type de date. Je reçois constamment l'erreur suivante The field 'Date' must be a date. 

Des idées?

METTRE &AGRAVE; JOUR

Il semble qu'il y ait un problème lorsque le code est dans une vue partielle. Lorsque je copie ce code sur une page principale, la validation fonctionne correctement.

J'insère une vue partielle dans ma vue principale simplement comme ceci:

@Html.Partial("_CreateOrEdit", Model)

Et ce code ci-dessus est à l'intérieur d'une vue partielle:

@model Pro.Web.Models.Model

<div class="editor-field">
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)

 

$(document).ready(function () {
$('.picker').datepicker({
    dateFormat: 'dd.mm.yy',
    changeMonth: true,
    changeYear: true,
    selectOtherMonths: true
});

</script>
});

UPDATE2

Cela ne fonctionne pas après tout. Parfois cela fonctionne, parfois pas. J'ai cliqué plusieurs fois sur les dates et parfois sur des passes de validation. Pour la même date, il pourrait y avoir une bonne et une mauvaise validation. 

Ceci est une sortie HTML pour le champ de date:

<div class="editor-field">
<input class="picker" data-val="true" data-val-date="The field Date must be a date." data-val-required="The Date field is required." id="date" name="Item.Date" type="text" value="1.1.0001. 0:00:00" />
<span class="field-validation-valid" data-valmsg-for="Item.Date" data-valmsg-replace="true"></span>
</div>
c#jqueryasp.net-mvcgoogle-chromedatepicker
26
Cristiano

Exact la même situation ici (vue partielle)

Je l'ai résolu en supprimant l'attribut de validation et en effectuant la validation côté serveur:

$('#date').removeAttr("data-val-date");
19
user3096151

Selon moi, le problème est que MVC génère pour l’entrée Date HTML5 avec [type=date]. Cela a pour effet que le format de date valide dans Chrome est identique au format de date système.

Vous pouvez probablement définir le format de date dans MVC pour qu'il soit commun avec JqueryUI en utilisant l'attribut suivant:

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

La deuxième idée consiste à utiliser le code de l'article suivant: Création d'un Datepicker HTML 5 natif avec un repli sur l'interface utilisateur jQuery

Une dernière chose. Il y a un bon sujet sur la date dans l'entrée HTML: Est-il possible de changer le format du type d'entrée = "date"?

11
Piotr Stapp

Je l'ai résolu en supprimant l'attribut de validation 

@model Pro.Web.Models.Model

<div class="editor-field">
@{ Html.EnableClientValidation(false); }
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)
@{ Html.EnableClientValidation(true); }
5
István

Le problème semble être avec <input type="date" /> (HTML5) comme spécification indique que la valeur valide est définie comme RFC3339 .

J'ai donc changé ma vue en quelque chose comme ceci:

<script>
    $(function () {
         $("#validfrom").datepicker({
             altField: "#ValidFrom",
             altFormat: "yy-mm-dd"
         });
    });
</script>

<div class="editor-label">
    @Html.LabelFor(model => model.ValidFrom)
</div>
<div class="editor-field">
    <input id="validfrom" type="text" name="validfrom" />
    @Html.HiddenFor(model => model.ValidFrom)
    @Html.ValidationMessageFor(model => model.ValidFrom)
</div>

J'espère que ça aide.

1
Hubo

J'ai eu la même erreur. Résolu en appliquant datetime comme type,

 @Html.EditorFor(model => model.LineResetAllowStartDate, new { htmlAttributes = new { @class = "form-control" ,  @type = "datetime" } })

de même utiliser le temps pour seulement le temps

 @Html.EditorFor(model => model.LineResetAllowStartDate, new { htmlAttributes = new { @class = "form-control" ,  @type = "time" } })
0
hispeed