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