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

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?

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.

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!

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.

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.

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.

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.

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>

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:

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.

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.

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

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

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.

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

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.