Gibt es eine Möglichkeit, den Eingabetyp = "Datums" -Format zu ändern?

766

Ich arbeite mit HTML5-Elementen auf meiner Webseite. Standardmäßig type="date"zeigt die Eingabe das Datum als an YYYY-MM-DD.

Die Frage ist, ist es möglich, sein Format in etwas zu ändern wie : DD-MM-YYYY?

Tural Ali
quelle
4
Google hat eine FAQ für Chrome erstellt: developer.google.com/web/updates/2012/08/… Das Format basiert also auf der Ländereinstellung des Betriebssystems.
Endy Tjahjono
Ich verschwende meine Zeit damit, es zu schaffen dd/mm/yyyy. Verwenden Sie einfach eine andere Bibliothek wie moment oder jQuery datepicker
Ali Al Amine

Antworten:

608

Das Format kann nicht geändert werden

Wir müssen zwischen dem Over-the-Wire-Format und dem Präsentationsformat des Browsers unterscheiden.

Drahtformat

Die HTML5-Datumseingabespezifikation bezieht sich auf die RFC 3339-Spezifikation , die ein Volldatumformat angibt, das gleich ist : yyyy-mm-dd. Weitere Informationen finden Sie in Abschnitt 5.6 der RFC 3339-Spezifikation.

Dieses Format wird vom valueHTML-Attribut und der DOM-Eigenschaft verwendet und wird bei der normalen Formularübermittlung verwendet.

Präsentationsformat

Browser können ihre Datumseingabe uneingeschränkt darstellen. Zum Zeitpunkt des Schreibens haben Chrome, Edge, Firefox und Opera Datumsunterstützung (siehe hier ). Sie alle zeigen eine Datumsauswahl an und formatieren den Text im Eingabefeld.

Desktop-Geräte

Bei Chrome, Firefox und Opera basiert die Formatierung des Textes des Eingabefelds auf der Spracheinstellung des Browsers. Für Edge basiert es auf der Windows-Spracheinstellung. Leider ignorieren alle Webbrowser die im Betriebssystem konfigurierte Datumsformatierung. Für mich ist dies ein sehr seltsames Verhalten und etwas, das bei der Verwendung dieses Eingabetyps zu beachten ist. Beispielsweise werden niederländische Benutzer, deren Betriebssystem oder Browsersprache eingestellt en-usist, 01/30/2019anstelle des gewohnten Formats angezeigt : 30-01-2019.

Internet Explorer 9, 10 und 11 zeigen ein Texteingabefeld im Drahtformat an.

Mobile Geräte

Speziell für Chrome unter Android basiert die Formatierung auf der Android-Anzeigesprache. Ich vermute, dass dies auch für andere Browser gilt, obwohl ich dies nicht überprüfen konnte.

David Walschots
quelle
Ich hätte auf einen JS-Zeitstempel gehofft und nicht auf das Drahtformat. Und eine Möglichkeit, das Präsentationsformat zu ändern, ist ziemlich schwierig, konsistent zu machen.
Allan Kimmer Jensen
7
@AllanKimmerJensen obwohl ich deine Gedanken verstehe. Ich glaube, die Entscheidung, das in RFC3339 angegebene Format zu verwenden, ist richtig, da dadurch keine Kopplung zwischen HTML und JavaScript hergestellt wird. Was Ihren zweiten Punkt betrifft, würde ich der Ansicht sein, dass es aus Sicht der Benutzerfreundlichkeit für den Benutzer sinnvoll wäre, den Kalender gemäß seinen regionalen Vorlieben anzuzeigen.
David Walschots
10
Wenn die App pt_BR ist, erwarte ich eine pt_BR-Eingabe. Meine Systemeinstellungen spielen keine Rolle. HTML5 benötigt eine Möglichkeit, das Gebietsschema zu erzwingen.
Iurisilvio
5
Ich verwende das spanische Gebietsschema für Datums- / Währungseinstellungen, da ich in Spanien ansässig bin. Meine Muttersprache ist jedoch Englisch. Ich bin an ein Tastaturlayout in den USA gewöhnt, daher verwende ich die Tastatur in Englisch / USA. Meine Kunden sind französischsprachige Europäer. Ich wünschte, ich könnte Chrome usw. andeuten, keine Daten mehr im Format MM-TT-JJJJ in den USA anzuzeigen.
Luke H
6
Was für eine nutzlose Komponente, wer zum Teufel hat sich diese Spezifikationen ausgedacht?
Boh
143

Seit diese Frage gestellt wurde, sind im Webbereich einige Dinge passiert, und eine der aufregendsten ist die Landung von Webkomponenten . Jetzt können Sie dieses Problem elegant mit einem benutzerdefinierten HTML5-Element lösen, das Ihren Anforderungen entspricht. Wenn Sie die Funktionsweise eines HTML-Tags überschreiben / ändern möchten, erstellen Sie einfach Ihre, indem Sie mit dem Shadow Dom spielen .

Die gute Nachricht ist, dass bereits viele Boilerplates verfügbar sind, sodass Sie höchstwahrscheinlich keine neue Lösung finden müssen. Überprüfen Sie einfach , was die Leute bauen, und holen Sie sich dort Ideen.

Sie können mit einer einfachen (und funktionierenden) Lösung wie der datetime-Eingabe für Polymer beginnen, mit der Sie ein Tag wie dieses verwenden können:

 <date-input date="{{date}}" timezone="[[timezone]]"></date-input>

Oder Sie können kreative und Popup-vollständige Datumsauswahl nach Ihren Wünschen gestalten , mit den gewünschten Formatierungen und Gebietsschemas, Rückrufen und Ihrer langen Liste von Optionen (Sie haben eine ganze benutzerdefinierte API zur Verfügung!).

Normkonform, keine Hacks.

Überprüfen Sie die verfügbaren Polyfills , welche Browser / Versionen sie unterstützen und ob sie genug% Ihrer Benutzerbasis abdecken. Es ist 2018, also wird es wahrscheinlich die meisten Ihrer Benutzer abdecken.

Ich hoffe es hilft!

joseldn
quelle
Aber sind einige davon lokalisierbar? dh ändern Sie die Monatsnamen in nicht Englisch. Und arbeiten sie auf Desktop und Mobile?
Sam Hasler
Sicher, sie sind lokalisierbar. Sie können das Gebietsschema des Systems nutzen (dh: is.gd/QSkwAY ) oder Ihre i18n-Dateien in der Webkomponente bereitstellen (dh: is.gd/Ru9U82 ). Mobile Browser werden mit Polyfills unterstützt, allerdings (noch) nicht zu 100%. Überprüfen Sie den von mir geposteten Link zu Browsern / Versionen. Auch dies ist eine blutige Kante. Wenn Sie zukunftsorientiert sind, ist dies eine großartige Lösung.
Joseldn
Entschuldigung, ich habe Ihren letzten Kommentar nicht gesehen. Dies: jcrowther.io/2015/05/11/i18n-and-web-components sieht sehr nützlich aus und sollte in die Antwort aufgenommen werden.
Sam Hasler
Ich bin froh, dass du es nützlich findest. Ich werde die Antwort mit allem aktualisieren.
Joseldn
@SDude Sieht so aus, als wären die Links, die Sie angegeben haben, immer noch nicht enthalten.
Mark Amery
79

Wie bereits erwähnt, ist es offiziell nicht möglich, das Format zu ändern. Es ist jedoch möglich, das Feld so zu gestalten, dass es (mit ein wenig JS-Hilfe) das Datum in einem von uns gewünschten Format anzeigt. Einige der Möglichkeiten zur Manipulation der Datumseingabe gehen auf diese Weise verloren. Wenn jedoch der Wunsch, das Format zu erzwingen, größer ist, ist diese Lösung möglicherweise eine Möglichkeit. Ein Datumsfeld bleibt nur so:

<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

Der Rest ist ein bisschen CSS und JS: http://jsfiddle.net/g7mvaosL/

$("input").on("change", function() {
    this.setAttribute(
        "data-date",
        moment(this.value, "YYYY-MM-DD")
        .format( this.getAttribute("data-date-format") )
    )
}).trigger("change")
input {
    position: relative;
    width: 150px; height: 20px;
    color: white;
}

input:before {
    position: absolute;
    top: 3px; left: 3px;
    content: attr(data-date);
    display: inline-block;
    color: black;
}

input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
    display: none;
}

input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 3px;
    right: 0;
    color: black;
    opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

Es funktioniert gut unter Chrome für den Desktop und Safari unter iOS (besonders wünschenswert, da native Datumsmanipulatoren auf Touchscreens meiner Meinung nach unschlagbar sind). Ich habe nicht nach anderen gesucht, aber ich erwarte nicht, dass ein Webkit fehlschlägt.

pmucha
quelle
1
Dies funktioniert nicht, Sie ändern MMMM YYYY DDnur die DDÄnderungen. -1 dafür, sorry
Can O 'Spam
3
@SamSwift - Haben Sie auf "Ausführen" geklickt, nachdem Sie den Wert geändert haben? ;)
pmucha
9
Nein, ist er nicht. Sie verstehen nicht, wie es funktioniert: Sie spielen mit JS und Sie sollten mit HTML. Sie haben das Eingabeformat der momentFunktion geändert und es ist nicht der richtige Weg. Sie sollten sich geändert haben data-date-format="DD-YYYY-MM"und dann würden Sie 09-2015-08 erhalten, was das richtige Ergebnis ist.
pmucha
3
Funktioniert auch nicht in Safari, Edge, Opera - was es unbrauchbar macht
MaxZoom
2
In Firefox gebrochen
Alexander Lallier
51

Es ist wichtig, zwei verschiedene Formate zu unterscheiden :

  • Das RFC 3339 / ISO 8601 "Drahtformat": JJJJ-MM-TT. Gemäß der HTML5-Spezifikation ist dies das Format, das für den Wert der Eingabe beim Senden des Formulars oder bei Anforderung über die DOM-API verwendet werden muss. Es ist unabhängig von Gebietsschema und Region.
  • Das Format, das von der Benutzeroberfläche angezeigt und als Benutzereingabe akzeptiert wird. Browser-Anbieter werden aufgefordert, die Auswahl der Benutzereinstellungen zu befolgen. Unter Mac OS mit der im Bereich "Sprach- und Texteinstellungen" ausgewählten Region "USA" verwendet Chrome 20 beispielsweise das Format "m / t / jj".

Die HTML5-Spezifikation enthält keine Möglichkeit, eines der Formate zu überschreiben oder manuell anzugeben.

John
quelle
1
Entspricht das valueAttribut dem Drahtformat oder was wird dem Benutzer angezeigt?
Flimm
2
@Flimm das valueAttribut stimmt immer mit dem Drahtformat überein.
David Walschots
14

Ich glaube, der Browser wird das lokale Datumsformat verwenden. Glaube nicht, dass es möglich ist, sich zu ändern. Sie können natürlich eine benutzerdefinierte Datumsauswahl verwenden.

Michael Mior
quelle
1
Lokales Datumsformat bedeutet, dass unser Telefon das Standard-Datumsformat oder das Datumsformat des Standorts hat.
Govindarao Kondala
2
Hängt davon ab, welchen mobilen Browser Sie verwenden. Aber ich vermute, es wird die Standardeinstellung des Telefons sein.
Michael Mior
2
"Lokales" Format bedeutet basierend auf dem geografischen Standort, was möglicherweise der schlechteste Weg ist, ein Datumsformat zu bestimmen. Würde ein Amerikaner, der nach Europa reist, erwarten, dass sein Smartphone die Zeit im 24-Stunden-Format und die Daten als JJJJ-MM-TT oder TT / MM / JJJJ anzeigt? Oder umgekehrt für einen Europäer in den USA?
RobG
10

Google Chrome verwendet in seiner letzten Beta-Version endlich die Eingabe type=dateund das Format ist DD-MM-YYYY.

Es muss also eine Möglichkeit geben, ein bestimmtes Format zu erzwingen. Ich entwickle eine HTML5-Webseite und die Datumssuche schlägt jetzt mit verschiedenen Formaten fehl.

Turamarth
quelle
18
Das von Ihnen erwähnte TT-MM-JJJJ-Format ist wahrscheinlich Ihr lokales Kalenderformat. Es ist nicht ratsam (und soweit ich sehen kann, innerhalb der aktuellen HTML5-Standards unmöglich), Besuchern einer Website ein bestimmtes Format aufzuzwingen, da sie möglicherweise an ein anderes Kalenderformat gewöhnt sind als das, das Sie ihnen aufzwingen.
David Walschots
3
Sie beziehen sich auf das Präsentationsformat, denn wenn Sie versuchen, die Datei input.val () zu lesen, gibt Google Chrome (v35) das Datum im Format JJJJ-MM-TT zurück, unabhängig vom Präsentationsformat;)
Tilt
3
@DavidWalschots, wenn nur die Amerikaner erkennen würden, wie unklug es ist, dem Rest der Welt das verzögerte mdy-Format aufzuzwingen.
user275801
@ user275801 Obwohl ich damit einverstanden bin, M-D-Yist das ein seltsames Format. Ich habe keine Amerikaner gesehen, die es anderen aufgezwungen haben. :-)
David Walschots
2
@DavidWalschots Bei den meisten Software- und Betriebssystemen, die ich gesehen habe, müssen Sie das amerikanische mdy-Format "deaktivieren". In diesem Sinne ist es tatsächlich "gezwungen". Tatsächlich hat mein Linux alle regionalen Einstellungen für Australien, aber mein Browser (ein amerikanischer Browser, wenn man das so nennen kann) nimmt es immer noch auf sich, alle Daten im mdy-Format anzuzeigen, und in diesem Fall kann ich nicht " Optischer Ausgang".
user275801
5

Versuchen Sie dies, wenn Sie eine schnelle Lösung benötigen. Damit JJJJ-MM-TT "TT-Sep-2016" wird

1) Erstellen Sie in der Nähe Ihrer Eingabe eine Spannenklasse (fungieren als Beschriftung).

2) Aktualisieren Sie das Etikett jedes Mal, wenn Ihr Datum vom Benutzer geändert wird oder wenn Daten geladen werden müssen.

Funktioniert für Webkit-Browser-Handys und Zeigerereignisse für IE11 + und erfordert jQuery und Jquery Date

$("#date_input").on("change", function () {
     $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
        });
#date_input{text-indent: -500px;height:25px; width:200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id ="date_input" dateformat="d M y" type="date"/>
<span class="datepicker_label" style="pointer-events: none;"></span>

Miguel
quelle
2
Dies beantwortet die Frage nicht und erfordert 2 Bibliotheken, von denen keine markiert oder angefordert sind. Die manuelle Eingabe des Datums ist ebenfalls nicht möglich.
RobG
Es wurde nicht gebeten, geändert zu werden, sondern nur das Format anzuzeigen. Sie können dies als Vorschau tun und die Eingabe mit Änderungsereignissen verwenden, um das Format trotzdem zu aktualisieren.
Miguel
4

Nachdem ich viele Diskussionen gelesen habe, habe ich eine einfache Lösung vorbereitet, aber ich möchte nicht viel Jquery und CSS verwenden, sondern nur etwas Javascript.

HTML Quelltext:

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

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:

Geben Sie hier die Bildbeschreibung ein

Ashish Bhatt
quelle
3

Wie gesagt, das <input type=date ... >ist in den meisten Browsern nicht vollständig implementiert. Lassen Sie uns also über Webkit wie Browser (Chrome) sprechen.

Mit Linux, können Sie es ändern , indem Sie die Umgebungsvariable zu ändern LANG, LC_TIMEtun scheint nicht zu arbeiten (für mich zumindest).

Sie können localeein Terminal eingeben, um Ihre aktuellen Werte anzuzeigen. Ich denke, dass das gleiche Konzept auf IOS angewendet werden kann.

zB: Verwenden von:

LANG=en_US.UTF-8 /opt/google/chrome/chrome

Das Datum wird angezeigt als mm/dd/yyyy

Verwenden von:

LANG=pt_BR /opt/google/chrome/chrome

Das Datum wird angezeigt als dd/mm/yyyy

Sie können http://lh.2xlibre.net/locale/pt_BR/ ( pt_BRnach Gebietsschema ändern ) verwenden, um ein eigenes benutzerdefiniertes Gebietsschema zu erstellen und Ihre Daten nach Ihren Wünschen zu formatieren.

Eine ausführliche Referenz zum Ändern des Standardsystemdatums lautet: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ und https: // askubuntu. com / question / 21316 / wie kann ich ein Systemgebietsschema anpassen?

Sie können Ihr aktuelles aktuelles Datumsformat anzeigen mit date:

$ date +%x
01-06-2015

Aber da LC_TIMEund d_fmtscheint von Chrome abgelehnt zu werden (und ich denke, es ist ein Fehler in Webkit oder Chrome), funktioniert es leider nicht . : '(

Also, leider ist die Antwort, LANGwenn Umgebungsvariable Ihr Problem nicht lösen, gibt es noch keinen Weg.

Tonne
quelle
+1 Großartig! using: LANG=ja_JP.UTF-8 chromium-browserhat den Trick für mich gemacht. Es funktioniert auch mit Vivaldi und ich denke auch in anderen Browsern. Vielen Dank!
Lepe
2

Browser erhalten das Datumseingabeformat aus dem Systemdatumformat des Benutzers.

(Getestet in unterstützten Browsern, Chrome, Edge.)

Da derzeit kein Standard durch Spezifikationen definiert ist, um den Stil der Datumssteuerung zu ändern, ist es nicht möglich, diesen in Browsern zu implementieren.

Dieses Verhalten beim Abrufen des Datumsformats aus den Systemeinstellungen ist jedoch besser, und ich empfehle dringend, dass wir nicht versuchen, es zu überschreiben. Der Grund dafür ist, dass die Benutzer das Format der Datumseingabe sehen, das sie im System / Gerät konfiguriert haben und mit dem sie vertraut sind oder mit ihrem Gebietsschema übereinstimmen.

Denken Sie daran, dies ist nur das UI-Format auf dem Bildschirm, das Benutzer sehen. In Ihrem Javascript / Backend können Sie immer das gewünschte Format beibehalten.

Weitere Informationen finden Sie auf der Google-Entwicklerseite.

Rahul R.
quelle
@downvoters, besser einen Kommentar zu -1 hinterlassen, um aktuelle und zukünftige Antworten zu verbessern.
Rahul R.
2

Es ist nicht möglich, Web-Kit-Browser mithilfe des Standard-Datumsformats des Benutzers oder des Mobiltelefons zu ändern. Wenn Sie jedoch jquery und jquery UI verwenden können, gibt es eine Datumsauswahl, die gestaltbar ist und in jedem vom Entwickler gewünschten Format angezeigt werden kann. Der Link zur Datumsauswahl für die jquery-Benutzeroberfläche befindet sich auf dieser Seite http://jqueryui.com/datepicker/. Dort finden Sie eine Demo sowie Code und Dokumentation oder einen Link zur Dokumentation

Bearbeiten: -Ich finde, dass Chrome Spracheinstellungen verwendet, die standardmäßig den Systemeinstellungen entsprechen, aber der Benutzer kann sie ändern, aber der Entwickler kann Benutzer nicht dazu zwingen, sodass Sie andere js-Lösungen verwenden müssen, wie ich Ihnen sage, dass Sie im Web suchen können mit Abfragen wie Javascript Date-Picker oder JQuery Date-Picker

Ravinder Payal
quelle
2

Ich habe einen Weg gefunden, das Format zu ändern. Es ist ein schwieriger Weg. Ich habe nur das Erscheinungsbild der Datumseingabefelder mit nur einem CSS-Code geändert.

input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
  color: #fff;
  position: relative;
}

input[type="date"]::-webkit-datetime-edit-year-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 56px;
}

input[type="date"]::-webkit-datetime-edit-month-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 26px;
}


input[type="date"]::-webkit-datetime-edit-day-field{
  position: absolute !important;
  color:#000;
  padding: 2px;
  left: 4px;
  
}
<input type="date" value="2019-12-07">

Safi Eddine
quelle
0

Da der Beitrag vor 2 Monaten aktiv ist. Also dachte ich auch daran, meinen Beitrag zu leisten.

In meinem Fall erhalte ich ein Datum von einem Kartenleser, der im Format TT / MM / JJJJ erhältlich ist.

was ich mache. Z.B

var d="16/09/2019" // date received from card
function filldate(){
    document.getElementById('cardexpirydate').value=d.split('/').reverse().join("-");
    }
<input type="date" id="cardexpirydate">
<br /><br />
<input type="button" value="fill the date" onclick="filldate();">

Was macht der Code?

  1. es teilt das Datum, das ich bekomme, als TT / MM / JJJJ (mit split ()) auf der Basis von "/" und erstellt ein Array,
  2. es kehrt dann das Array um (mit reverse ()), da die Datumseingabe die Umkehrung dessen unterstützt, was ich bekomme.
  3. Anschließend wird das Array (mithilfe von join ()) mit einer Zeichenfolge gemäß dem vom Eingabefeld geforderten Format verknüpft

All dies geschieht in einer einzigen Zeile.

Ich dachte, das wird jemandem helfen, also habe ich das geschrieben.

Hisbollah Shah
quelle
Damit wird die gestellte Frage nicht beantwortet. Sie analysieren hier ein benutzerdefiniertes Format und ändern nicht das Format, in dem <input>der Wert angezeigt wird.
Mark Amery
Dies ist nur eine
Umgehung
0

Ich habe dieses Problem vor 2 Jahren gesucht und meine Google-Suche führt mich erneut zu dieser Frage. Verschwenden Sie keine Zeit damit, dies mit reinem JavaScript zu tun. Ich verschwende meine Zeit damit, es zu schaffen dd/mm/yyyy. Es gibt keine vollständigen Lösungen, die für alle Browser geeignet sind. Daher empfehle ich, jQuery Datepicker zu verwenden oder Ihren Kunden anzuweisen , stattdessen mit dem Standard-Datumsformat zu arbeiten

Ali Al Amine
quelle
-1

Ich weiß, dass es ein alter Beitrag ist, aber es kommt als erster Vorschlag in der Google-Suche, kurze Antwort nein, empfohlener Antwortbenutzer ein benutzerdefinierter Datums-Piker. Die richtige Antwort, die ich verwende, ist die Verwendung eines Textfelds, um die Datumseingabe zu simulieren und ein beliebiges Format zu erstellen Hier ist der Code

<html>
<body>
date : 
<span style="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px">
    <input type="date" class="xDateContainer" onchange="setCorrect(this,'xTime');" style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><input type="text" id="xTime" name="xTime" value="dd / mm / yyyy" style="border: none;height: 90%;" tabindex="-1"><span style="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;" tabindex="-1">&#9660;</span>
</span>
<script language="javascript">
var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
    window.onload =function(){
        var input = document.createElement('input');
        input.setAttribute('type','date');
        input.setAttribute('value', 'some text'); 
        if(input.value === "some text"){
            allDates = document.getElementsByClassName("xDateContainer");
            matchEnterdDate=1;
            for (var i = 0; i < allDates.length; i++) {
                allDates[i].style.opacity = "1";
            } 
        }
    }
//function to convert enterd date to any format
function setCorrect(xObj,xTraget){
    var date = new Date(xObj.value);
    var month = date.getMonth();
    var day = date.getDate();
    var year = date.getFullYear();
    if(month!='NaN'){
        document.getElementById(xTraget).value=day+" / "+month+" / "+year;
    }else{
        if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
    }
}
   </script>
  </body>
</html>

1- Bitte beachten Sie, dass diese Methode nur für Browser funktioniert, die den Datumstyp unterstützen.

2- Die erste Funktion im JS-Code ist für Browser gedacht, die den Datumstyp nicht unterstützen und das Aussehen auf eine normale Texteingabe einstellen.

3- Wenn Sie diesen Code für mehrere Datumseingaben auf Ihrer Seite verwenden, ändern Sie bitte die ID "xTime" der Texteingabe sowohl im Funktionsaufruf als auch in der Eingabe selbst in etwas anderes und verwenden Sie natürlich den Namen der gewünschten Eingabe für die Formular einreichen.

4-auf der zweiten Funktion können Sie ein beliebiges Format anstelle von Tag + "/" + Monat + "/" + Jahr zum Beispiel Jahr + "/" + Monat + "/" + Tag verwenden und in der Texteingabe einen Platzhalter oder Wert als verwenden JJJJ / MM / TT für den Benutzer beim Laden der Seite.

schattig
quelle