it-swarm.com.de

Gibt es eine Möglichkeit, das Format von Eingabetyp = "Datum" zu ändern?

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

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

675
Tural Ali

Es ist unmöglich, das Format zu ändern

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

Drahtformat

Die HTML5-Datumseingabespezifikation bezieht sich auf die RFC3339-Spezifikation , die ein vollständiges Datumsformat mit folgendem Wert angibt: yyyy-mm-dd. Weitere Informationen finden Sie in Abschnitt 5.6 der RFC3339-Spezifikation.

Präsentationsformat

Browser können uneingeschränkt Datumseingaben anzeigen. Zum Zeitpunkt des Schreibens von Chrome haben 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 Eingabefeldtextes 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 merkwürdiges Verhalten und bei der Verwendung dieses Eingabetyps zu berücksichtigen. Beispielsweise wird niederländischen Benutzern, deren Betriebssystem oder Browsersprache auf en-us eingestellt ist, 01/30/2019 anstelle des Formats angezeigt, an das sie gewöhnt sind: 30-01-2019.

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

Mobilgeräte

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

544
David Walschots

Seitdem diese Frage gestellt wurde, ist im Web-Bereich einiges passiert, und eines der aufregendsten ist die Landung von Web-Komponenten . Jetzt können Sie dieses Problem elegant mit einem benutzerdefiniertes HTML5-Element lösen, das Ihren Anforderungen entspricht. Wenn Sie die Funktionsweise eines HTML-Tags überschreiben/ändern möchten, erstellen Sie einfach Ihr eigenes, indem Sie mit dem Shadow Dom spielen.

Die gute Nachricht ist, dass es bereits viele Boilerplates gibt, sodass Sie höchstwahrscheinlich keine Lösung von Grund auf neu finden müssen. Einfach überprüfen was Leute bauen und Ideen von dort bekommen.

Sie können mit einer einfachen (und funktionierenden) Lösung wie datetime-input for 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 Pop-up-vollständige Datumsauswahl erhalten wie gewünscht gestaltet , mit den gewünschten Formatierungen und Gebietsschemas, Rückrufen und Ihrer langen Liste von Optionen (Sie haben eine vollständige benutzerdefinierte API zu deiner Verfügung!)

Standardkonform, keine Hacks.

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

Ich hoffe es hilft!

123
SDude

Wie bereits erwähnt, ist es offiziell nicht möglich, das Format zu ändern. Es ist jedoch möglich, das Feld zu formatieren, sodass es (mit etwas 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, aber wenn der Wunsch, das Format zu erzwingen, größer ist, könnte diese Lösung eine Möglichkeit sein. 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/

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

67
pmucha

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 Absenden des Formulars oder bei Anforderung über die DOM-API verwendet werden muss. Es ist Gebietsschema und Region unabhängig.
  • Das Format, das von der Benutzeroberfläche angezeigt und als Benutzereingabe akzeptiert wird. Browser-Anbieter werden aufgefordert, die Auswahl der Benutzereinstellungen zu befolgen. Beispiel: Unter Mac OS mit der Region "USA", die im Bereich "Sprach- und Texteinstellungen" ausgewählt wurde, verwendet Chrome 20 das Format "m/d/yy".

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

47
John

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

14
Michael Mior

Nach vielen Hürden habe ich eine Lösung gefunden, mit der das Format geändert werden kann. Es gibt ein paar Einschränkungen, aber es ist nützlich, wenn Sie möchten, dass "Jan" oder "01" konsistent angezeigt werden. Es funktioniert in Chrome unter Windows und Mac nur aufgrund der Tatsache, dass Firefox native Datumsauswahl überhaupt noch nicht unterstützt.

https://github.com/northamerican/custom-input-date-format

JS:

function updateDateInputs() { 
    $('input').each(function() {
        var $date = $(this),
            date = $date.val().split('-'),
            format = ['year', 'month', 'day'];
        $.each(format, function(i, v) {
            $date.attr('data-' + v, +date[i]);
        });
    });
}

SASS:

$months: '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12';
@each $month in $months {
    $i: index($months, $month);

    input[data-month="#{$i}"][data-style="reg"]::-webkit-datetime-edit-month-field:after { 
        content: "#{$month}";
    }
}
11
northamerican

Google Chrome verwendet in seiner letzten Betaversion schließlich die Eingabe type=date und 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.

10
Turamarth

Versuch dies, wenn Sie eine schnelle Lösung benötigen, um JJJJ-MM-TT zu machen, gehen Sie zu "TT-SEP-2016"

1) Erstellen Sie in der Nähe Ihrer Eingabe eine Bereichsklasse (fungieren Sie 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 + erfordern 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>
5
Miguel

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:

enter image description here

4
ashish bhatt

Es ist nicht möglich, den Browser des Web-Kits zu ändern, wenn der Computer des Benutzers oder das Standard-Datumsformat des Mobiltelefons verwendet werden. 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. Auf dieser Seite http://jqueryui.com/datepicker/ befindet sich der Link zur JQuery-Benutzeroberfläche für die Datumsauswahl Dokumentation oder Dokumentationslink

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 wie I verwenden müssen Sie können das Web mit Suchanfragen wie Javascript Date-Picker oder JQuery Date-Picker durchsuchen

2
Ravinder Payal

Wie bereits erwähnt, ist der <input type=date ... > in den meisten Browsern nicht vollständig implementiert. Lassen Sie uns also über Webkit-ähnliche Browser (Chrome) sprechen.

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

Sie können locale in ein Terminal eingeben, um Ihre aktuellen Werte anzuzeigen. Ich denke, dass das gleiche Konzept auf iOS angewendet werden kann.

zB: Mit:

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

Das Datum wird als mm/dd/yyyy angezeigt

Verwenden von:

LANG=pt_BR /opt/google/chrome/chrome

Das Datum wird als dd/mm/yyyy angezeigt

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

Eine weiterführende Referenz zur Änderung des Standard-Systemdatums: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ und https://askubuntu.com/questions/21316/how-can-i-customize-a-system-locale

Sie können das aktuelle Datumsformat mit date anzeigen:

$ date +%x
01-06-2015

Aber da LC_TIME und d_fmt von chrome abgelehnt zu werden scheinen (und ich denke, es ist ein Fehler im Webkit oder in chrome), leider funktioniert nicht . : '(

Also, leider ist die Antwort, wenn LANG Umgebungsvariable Ihr Problem nicht lösen, gibt es noch keine Möglichkeit.

2
ton

Browser erhalten das Datumseingabeformat vom Systemdatum des Benutzers.

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

Da in den Spezifikationen zum jetzigen Zeitpunkt kein Standard zur Änderung des Datumssteuerungsstils definiert ist, ist es nicht möglich, dasselbe in Browsern zu implementieren.

Dieses Verhalten beim Abrufen des Datumsformats aus den Systemeinstellungen ist jedoch besser und ich empfehle dringend, es nicht zu überschreiben. Der Grund dafür ist, dass die Benutzer das Datumseingabeformat so sehen, wie sie es 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.

Siehe auch die Google-Entwicklerseite.

1
Rahul R.

Ich weiß, dass es ein alter Beitrag ist, aber er kommt als erster Vorschlag in der Google-Suche, kurze Antwort Nein, empfohlene Antwort Benutzer ein benutzerdefiniertes Datum Piker, die richtige Antwort, die ich verwende, verwendet ein Textfeld, um die Datumseingabe zu simulieren und jedes gewünschte Format zu tun 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 in JS-Code ist für Browser, die den Datumstyp nicht unterstützen und die Darstellung 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 absenden.

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

0
shady