it-swarm.com.de

Das HTML-5-Datumsfeld wird in Chrome als "mm/tt/jjjj" angezeigt, auch wenn ein gültiges Datum festgelegt ist

Ich habe gerade eine ASP.Net-MVC-Anwendung auf MVC-4 aktualisiert. Der Feldeditor für Eingaben, die auf DateTime-Werten basieren, enthält jetzt die HTML-5-Attribut/Wert-Deklaration type="date".

Beim Anzeigen in Chrome werden meine Datumseingaben jetzt mit "mm/tt/jjjj" im Eingabefeld angezeigt:

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

Auch wenn ich ein korrekt formatiertes Datum mit dem value-Attribut übergeben habe: 

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

Ich bekomme immer noch "mm/tt/jjjj" im Eingabefeld, das so lange vorhanden ist, bis der Benutzer den Wert manuell ändert.

Das Problem scheint bei Chrome zu liegen und ist unabhängig von meinem Backend-Framework. Sehen Sie dieses Problem in Aktion: jsFiddle

... natürlich ein großes Problem für das Bearbeiten von Datensätzen. Wenn der Benutzer einen Datensatz abruft, für den bereits ein gültiges Datum vorhanden ist, wird die Überprüfung beim Senden nicht bestanden, wenn er nicht in das Feld geklickt und den Wert manuell zurückgesetzt hat.

Keine Probleme mit den anderen Browsern.

Ist dies ein Chrome-Fehler? Oder habe ich etwas verpasst, wie das HTML-5-Datumsfeld funktionieren soll?

UPDATE
Siehe diese Überarbeitung der Geige: http://jsfiddle.net/HudMe/5/ Es hat sowohl einen HTML-4- als auch einen HTML-5-Datumseingang, jeweils mit "10/01/2012" als gesetzt der Wert beim Laden der Seite.

Klicken Sie in eines der Datumsfelder. Das Javascript sollte eine Warnung mit dem Wert des Felds für dieses Element anzeigen. 

Da ein gültiges Datum mit dem value-Attribut übergeben wurde, sollte dieses "10/01/2012" anzeigen. In Chrome wird jedoch für das Datumsfeld "HTML-5" nichts angezeigt. Setzen Sie diesen Wert von Hand zurück und klicken Sie erneut, um ihn anzuzeigen. 

Der Wert aus dem HTML5-Feld zeigt und zeigt erwartungsgemäß Warnmeldungen ohne Anpassung nach dem Laden in Safari, Firefox, IE und Opera an.

Hinweis zur akzeptierten Antwort:
Für andere Benutzer von Asp.net mvc-4 können Sie das Anzeigeformat mit dem [DisplayFormat]-Attribut der DateTime-Felddeklaration in Ihrem Ansichtsmodell anpassen. (gefunden unter https://stackoverflow.com/a/12634470/613004 )

47
Faust

In Chrome, um den Wert festzulegen, den Sie tun müssen, YYYY-MM-DD Ich denke, weil dies funktioniert hat: http://jsfiddle.net/HudMe/6/

Damit es funktioniert, müssen Sie das Datum als 2012-10-01 einstellen.

50
eric.itzhak

Hatte das gleiche Problem. Ein Kollege löste dies mit 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>

Ich verwende jQuery Datepicker zur Auswahl des Datums.

3
Wim

Ich hatte das gleiche Problem, mit einem Wert wie 2016-08-8, dann löste ich das Hinzufügen einer Null, um Tage mit zwei Stellen zu haben, und es funktioniert .. _. In Chrom, Firefox und Edge getestet

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

Wenn Sie es mit einer Tabelle zu tun haben und eines der Daten zufällig null ist, können Sie es folgendermaßen codieren:

  @{
     if (Model.SomeCollection[i].date_due == null)
       {
         <td><input type='date' id="@("dd" + i)" name="dd" /></td>
       }
       else
       {
         <td><input type='date' value="@Model.SomeCollection[i].date_due.Value.ToString("yyyy-MM-dd")" id="@("dd" + i)" name="dd" /></td>
       }
   }
0
James

Ich habe dasselbe Problem und habe eine Lösung gefunden, die unten mit vollem Datepicker unter Verwendung von einfachem HTML, Javascript und CSS angegeben ist. In diesem Code bereite ich Formate wie TT/MM/JJJJ vor, aber Sie können jedes beliebige bearbeiten. 

HTML Quelltext:

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

CSS-Code:

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

Javascript-Code:

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;
}

Ausgabe:

 enter image description here

0
ashish bhatt