web-dev-qa-db-fra.com

Le champ de date HTML-5 indique "mm/jj/aaaa" dans Chrome, même si la date valide est définie

Je viens de mettre à niveau une application ASP.Net MVC vers MVC-4. L'éditeur de champ pour les entrées basées sur les valeurs DateTime inclut désormais la déclaration d'attribut/valeur HTML-5 type="date".

Maintenant, lors de l'affichage dans Chrome, mes entrées de date s'affichent avec "mm/jj/aaaa" dans le champ de saisie:

date field with 'mm/dd/yyyy' in box

Même lorsque je passe une date correctement formatée avec l'attribut value: 

<input value="2012/10/02" type="date"/>

Je reçois toujours le message "mm/jj/aaaa" dans la zone de saisie, jusqu'à ce que l'utilisateur modifie manuellement la valeur.

Le problème semble être lié à Chrome et est indépendant de mon framework back-end. Voir ce problème en action: jsFiddle

... gros problème pour l'édition des enregistrements, bien sûr. Si l'utilisateur extrait un enregistrement qui possède déjà une date valide, il ne passera pas la validation lors de l'envoi, à moins qu'il ne clique dans le champ et réinitialise la valeur manuellement.

Pas de problèmes avec les autres navigateurs.

Est-ce un bug de Chrome? Ou ai-je oublié quelque chose sur la manière dont le champ de date HTML-5 est censé fonctionner?

METTRE &AGRAVE; JOUR
Voir ce violon révisé: http://jsfiddle.net/HudMe/5/ Il a une entrée de date HTML-4 et HTML-5, chacune avec "10/01/2012" définie comme la valeur sur le chargement de page.

Cliquez sur l'un des champs de date . Le Javascript devrait déclencher une alerte avec la valeur du champ pour cet élément. 

Puisqu'une date valide a été passée avec l'attribut value, cela devrait afficher "10/01/2012", mais dans Chrome, pour le champ de date HTML-5, rien ne s'affiche. Réinitialisez cette valeur à la main, puis cliquez à nouveau pour afficher le résultat. 

La valeur du champ HTML5 affiche et alerte comme prévu sans ajustement après le chargement en page dans Safari, Firefox, IE et Opera.

Note sur la réponse acceptée:
Pour les autres utilisateurs d'Asp.net mvc-4, vous pouvez ajuster le format d'affichage avec l'attribut [DisplayFormat] dans la déclaration de champ DateTime de votre modèle de vue. (trouvé à https://stackoverflow.com/a/12634470/613004 )

html5google-chrome
47
Faust

En chrome pour définir la valeur que vous devez faire YYYY-MM-DD je suppose parce que cela a fonctionné: http://jsfiddle.net/HudMe/6/

Donc, pour que cela fonctionne, vous devez définir la date avec 2012-10-01

50
eric.itzhak

Avait le même problème. Un collègue a résolu ce problème avec jQuery.Globalize .

<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.globalize/globalize.js" type="text/javascript"></script>
<script src="/Scripts/jquery.globalize/cultures/globalize.culture.nl.js"></script>
<script type="text/javascript">
    var lang = 'nl';

    $(function () {
        Globalize.culture(lang);
    });

    // fixing a weird validation issue with dates (nl date notation) and Google Chrome
    $.validator.methods.date = function(value, element) {
        var d = Globalize.parseDate(value);
        return this.optional(element) || !/Invalid|NaN/.test(d);
    };
</script>

J'utilise jQuery Datepicker pour sélectionner la date.

3
Wim

J'avais le même problème, avec une valeur comme 2016-08-8, puis j'ai résolu d'ajouter un zéro pour avoir deux chiffres, et cela fonctionne . Testé en chrome, firefox et Edge

today:function(){
   var today = new Date();
   var d = (today.getDate() < 10 ? '0' : '' )+ today.getDate();
   var m = ((today.getMonth() + 1) < 10 ? '0' :'') + (today.getMonth() + 1);
   var y = today.getFullYear();
   var x = String(y+"-"+m+"-"+d); 
   return x;
}
0
Ricardo Bandala

J'ai le même problème et j'ai trouvé la solution qui est donnée ci-dessous avec datepicker complet en utilisant HTML simple, Javascript et CSS. Dans ce code, je prépare du formate comme jj/mm/aaaa mais vous pouvez travailler n’importe lequel. 

Code HTML:

    <body>
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt"  onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />
</body>

Code CSS:

#dt{text-indent: -500px;height:25px; width:200px;}

Code Javascript:

function mydate()
{
  //alert("");
document.getElementById("dt").hidden=false;
document.getElementById("ndt").hidden=true;
}
function mydate1()
{
 d=new Date(document.getElementById("dt").value);
dt=d.getDate();
mn=d.getMonth();
mn++;
yy=d.getFullYear();
document.getElementById("ndt").value=dt+"/"+mn+"/"+yy
document.getElementById("ndt").hidden=false;
document.getElementById("dt").hidden=true;
}

Sortie:

 enter image description here

0
ashish bhatt