Wie stelle ich das Datumsformat im HTML-Datumseingabe-Tag ein?

105

Ich frage mich, ob es möglich ist, das Datumsformat im HTML- <input type="date"></input>Tag festzulegen ... Derzeit ist es JJJJ-MM-TT, während ich es im Format TT-MM-JJJJ benötige.

— Piotr
quelle

3

Ist es nicht ein mögliches Duplikat der Angabe der Wertausgabe eines HTML5-Eingabetyps = Datum? ? Ich würde sagen, diese Frage hier ist besser gestellt als die ältere, aber diese ältere hat eine ziemlich gute Antwort.

— Arsen7

Mögliches Duplikat von Gibt es eine Möglichkeit, das Format für den Eingabetyp = "Datum" zu ändern?

— Vaibhav Mule

Meine Ländereinstellungen sind Niederländisch und in Chrome wird TT-MM-JJJJ angezeigt. Es scheint, dass dies von den Windows-Einstellungen des Clients abhängt, der die Website verwendet.

— dark_passages

11

Das tust du nicht.

Erstens ist Ihre Frage nicht eindeutig - meinen Sie das Format, in dem sie dem Benutzer angezeigt wird, oder das Format, in dem sie an den Webserver übertragen wird?

Wenn Sie das Format meinen, in dem es dem Benutzer angezeigt wird, liegt dies an der Endbenutzeroberfläche, nicht an irgendetwas, das Sie im HTML angeben. Normalerweise würde ich erwarten, dass es auf dem Datumsformat basiert, das in den Gebietsschemaeinstellungen des Betriebssystems festgelegt ist. Es macht keinen Sinn, zu versuchen, es mit Ihrem eigenen bevorzugten Format zu überschreiben, da das Format, in dem es angezeigt wird, (im Allgemeinen) das richtige für das Gebietsschema des Benutzers und das Format ist, in dem der Benutzer Daten schreibt / versteht.

Wenn Sie das Format meinen, in dem es an den Server übertragen wird, versuchen Sie, das falsche Problem zu beheben. Sie müssen den serverseitigen Code so programmieren, dass Datumsangaben im Format JJJJ-MM-TT akzeptiert werden.

— Stewart
quelle

Leider trifft Ihr zweiter Kommentar in der realen Welt nicht ganz zu. Einige Browser, wie Chrome und Opera, respektieren zumindest die Reihenfolge der Entitäten, jedoch nicht mehr. In meinen Gebietsschemaeinstellungen für das Betriebssystem ist beispielsweise festgelegt, dass der erste Augusttag dieses Jahres als kurzes Datum der 08.01.2016 sein sollte , aber auch Chrome und Opera zeigen den 01.08.2016 . Andere Browser wie Safari und Firefox (zumindest unter OS X) ignorieren die Betriebssystemeinstellungen vollständig und zeigen immer 2016-08-16 an, egal was passiert . Auf einer Site, auf der Benutzer ihre eigenen Datumseinstellungen festlegen können, ist es sicherlich sinnvoll, diese zu überschreiben.

— Janus Bahs Jacquet

(Ignorieren Sie den Hinweis zu Firefox und Safari… Ich bin müde. Keiner der Browser unterstützt den Datumstyp überhaupt, daher wird nur das zugrunde liegende Format des Werts angezeigt, das bei meinem aktuellen Code JJJJ-MM-TT lautet .)

— Janus Bahs Jacquet

Fragen sich die meisten Leute, wie das Anzeige- / Eingabedatumformat geändert werden soll, damit Benutzer ihre eigenen Einstellungen vornehmen oder der Welt ihre eigenen bevorzugten Datumsformate hinzufügen können? Letzteres sollte niemand tun, wie ich bereits sagte, aber Sie könnten so oder so darüber streiten, ob Ersteres angemessen ist. Aber es wäre eine Präsentationseinstellung, also außerhalb des Bereichs von HTML.

— Stewart

Das Problem ist, dass es sich um eine Präsentationseinstellung handelt , die nicht festgelegt werden kann . Präsentationseinstellungen gehören im Allgemeinen zu CSS, aber es gibt keine Möglichkeit, dies in CSS (oder anderswo) zu ändern. Außerdem ist selbst die HTML-Spezifikation selbst nicht frei von Präsentationseinstellungen. In dem Abschnitt über input[type=password]heißt es beispielsweise, dass „der Benutzeragent den Wert verdecken sollte, damit andere als der Benutzer ihn nicht sehen können“. Dies ist ebenso eine Präsentation wie die Aussage, dass der Benutzeragent das Datum auf eine bestimmte Weise darstellen sollte.

— Janus Bahs Jacquet

1

Einige würden sagen , dass es gut ist, dass es nicht eingestellt werden kann, da es Webmaster daran hindert, der Welt ihre eigenen bevorzugten Datumsformate zuzufügen. Aber Passworteingaben haben mich zum Nachdenken gebracht. An vielen Stellen enthält die HTML-Spezifikation Präsentationsempfehlungen, die im Wesentlichen Empfehlungen für Standard-Stylesheets des Browsers sind. Der Unterschied besteht darin, dass es für diesen speziellen Präsentationsaspekt keine CSS-Eigenschaft zu geben scheint.

— Stewart

11

Ich habe die gleiche Frage oder eine verwandte Frage zum Stapelüberlauf gefunden

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

Ich habe eine einfache Lösung gefunden: Sie können kein Partikelformat angeben, aber Sie können es wie folgt anpassen.

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:

— Ashish Bhatt
quelle

Noch besser - verwenden Sie CSS, um eine transparente Datumskontrolle über die reguläre Eingabe zu positionieren

— George Mauer

Vielen Dank für Ihre Antwort, wenn Sie einen Link oder Code dafür haben, muss ich aktualisieren

— ashish bhatt

Dies ist eine großartige Option.

— Dillon Burnett

Ich denke, er fragt, ob es mit HTML (basierend auf der Frage) möglich ist, nicht mit CSS oder Javascript.

— Shizukura

6

Wenn Sie jQuery verwenden, finden Sie hier eine schöne einfache Methode

$("#dateField").val(new Date().toISOString().substring(0, 10));

Oder es gibt den alten traditionellen Weg:

document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)

— sean.boyer
quelle

4

Warum nicht das HTML5-Datumssteuerelement so verwenden, wie es ist, mit anderen Attributen, die es ermöglichen, in Browsern zu funktionieren, die den Datumstyp unterstützen, und weiterhin in anderen Browsern wie Firefox, die den Datumstyp noch nicht unterstützen

<input type="date" name="input1" placeholder="YYYY-MM-DD" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="Enter a date in this formart YYYY-MM-DD"/>

— Paul IE
quelle

— Paul IE

8

Die Anforderung war eindeutig, ich zitiere - "Ich brauche es im TT-MM-JJJJ-Format." Wie hilft das?

— Harijs Krūtainis

1

funktioniert nicht mit Firefox. Dieser HTML-Code zeigt eine Eingabe mit dem Platzhalter MM / TT / JJJJ. Meine Fenster und mein Firefox sind beide mit Niederländisch als Muttersprache eingestellt. Die regionale Windows-Einstellung zeigt das kurze Datum an: 30-11-2018.

— Roland

1

Ich denke schon, in HTML gibt es keine Syntax für das Format TT-MM-JJJJ. Siehe diese Seite http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm . Etwas wird es dir helfen. Andernfalls verwenden Sie die Javascript-Datumsauswahl.

— Rathika Jeganathan
quelle

1

Ich weiß das nicht genau, aber ich denke, dass dies vom Browser basierend auf den Datums- / Uhrzeiteinstellungen des Benutzers erledigt werden soll. Versuchen Sie, Ihren Computer so einzustellen, dass Datumsangaben in diesem Format angezeigt werden.

— Syntax-Fehler
quelle

1

$('input[type="date"]').change(function(){
   alert(this.value.split("-").reverse().join("-")); 
});

— Dheeraj Rao
quelle

3

Vielen Dank für dieses Code-Snippet, das möglicherweise sofortige Hilfe bietet. Eine richtige Erklärung würde den Bildungswert erheblich verbessern , indem sie zeigt, warum dies eine gute Lösung für das Problem ist, und sie für zukünftige Leser mit ähnlichen, aber nicht identischen Fragen nützlicher machen. Bitte bearbeiten Sie Ihre Antwort, um eine Erklärung hinzuzufügen, und geben Sie an, welche Einschränkungen und Annahmen gelten.

— Toby Speight

1

Ich habe viel recherchiert und ich glaube nicht, dass man das Format des erzwingen kann <input type="date">. Der Browser wählt das lokale Format aus. Abhängig von den Benutzereinstellungen wird das Datum im englischen Format (MM / TT / JJJJ) angezeigt, wenn die Sprache des Benutzers Englisch ist.

Meiner Meinung nach ist die beste Lösung, ein Plugin zur Steuerung der Anzeige zu verwenden.

Jquery DatePicker scheint eine gute Option zu sein, da Sie die Lokalisierung , das Datumsformat ... erzwingen können.

— Fifi
quelle

1

Ich habe eine etwas andere Antwort gefunden als alles, was ich oben gelesen habe.

Meine Lösung verwendet ein wenig JavaScript und eine HTML-Eingabe.

Das von einer Eingabe akzeptierte Datum führt zu einer Zeichenfolge, die als "JJJJ-MM-TT" formatiert ist. Wir können es teilen und richtig als neues Datum platzieren ().

Hier ist grundlegendes HTML:

<form id="userForm">
    <input type="text" placeholder="1, 2, 3, 4, 5, 6" id="userNumbers" />
    <input type="date" id="userDate" />
    <input type="submit" value="Track" />
</form>

Hier ist grundlegende JS:

let userDate = document.getElementById('userDate').value.split('-'),
    parsedDate = new Date((`${userDate[1]}-${userDate[2]}-${userDate[0]}`));

Sie können das Datum beliebig formatieren. Sie können ein neues Datum () erstellen und alle Informationen von dort abrufen ... oder einfach 'userDate []' verwenden, um Ihre Zeichenfolge zu erstellen.

Beachten Sie, dass einige Möglichkeiten, wie ein Datum in 'new Date ()' eingegeben wird, zu einem unerwarteten Ergebnis führen. (dh - einen Tag zurück)

— thielr7
quelle

1

<html>

    <body>
        <p id="result">result</p>Enter some text: <input type="date" name="txt" id="value" onchange="myFunction(value)">
        <button onclick="f()">submit</button>
        <script>
            var a;

            function myFunction(val){
                a = val.split("-").reverse().join("-");
                document.getElementById("value").type = "text";
                document.getElementById("value").value = a;
            }

            function f(){
                document.getElementById("result").innerHTML = a;
                var z = a.split("-").reverse().join("-");
                document.getElementById("value").type = "date";
                document.getElementById("value").value = z;
            }

        </script>
    </body>

</html>

— Pala Dattadri
quelle

2

Wenn Sie hier HTML-Code veröffentlichen, ist es sehr wichtig, dass Sie ihn als Code formatieren. Wenn Sie dies nicht tun, wird es als Teil der Seite formatiert und Ihre Antwort sieht nicht wie eine Antwort aus. Wenn Sie nicht wissen, wie man formatiert, gibt es eine nette Anleitung in der Hilfe

— Zoe

0

Eine kurze direkte Antwort ist nein oder nicht sofort einsatzbereit, aber ich habe eine Methode entwickelt, um ein Textfeld und reinen JS-Code zu verwenden, 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

0

Zum Formatieren in MM-TT-JJJJ

aa = date.split ("-")

Datum = aa [1] + '-' + aa [2] + '-' + aa [0]

— Abilash Raghu
quelle

-1

Saubere Implementierung ohne Abhängigkeiten. https://jsfiddle.net/h3hqydxa/1/

  <style type="text/css">
    .dateField {
      width: 150px;
      height: 32px;
      border: none;
      position: absolute;
      top: 32px;
      left: 32px;
      opacity: 0.5;
      font-size: 12px;
      font-weight: 300;
      font-family: Arial;
      opacity: 0;
    }

    .fakeDateField {
      width: 100px; /* less, so we don't intercept click on browser chrome for date picker. could also change this at runtime */
      height: 32px; /* same as above */
      border: none;
      position: absolute; /* position overtop the date field */
      top: 32px;
      left: 32px;
      display: visible;
      font-size: 12px; /* same as above */
      font-weight: 300; /* same as above */
      font-family: Arial; /* same as above */
      line-height: 32px; /* for vertical centering */
    }
  </style>

  <input class="dateField" id="dateField" type="date"></input>
  <div id="fakeDateField" class="fakeDateField"><em>(initial value)</em></div>

  <script>
    var dateField = document.getElementById("dateField");
    var fakeDateField = document.getElementById("fakeDateField");

    fakeDateField.addEventListener("click", function() {
      document.getElementById("dateField").focus();
    }, false);

    dateField.addEventListener("focus", function() {
      fakeDateField.style.opacity = 0;
      dateField.style.opacity = 1;
    });

    dateField.addEventListener("blur", function() {
      fakeDateField.style.opacity = 1;
      dateField.style.opacity = 0;
    });

    dateField.addEventListener("change", function() {
      // this method could be replaced by momentJS stuff
      if (dateField.value.length < 1) {
        return;
      }

      var date = new Date(dateField.value);
      var day = date.getUTCDate();
      var month = date.getUTCMonth() + 1; //zero-based month values
      fakeDateField.innerHTML = (month < 10 ? "0" : "") + month + " / " + day;
    });

  </script>

— James Perih
quelle

-2

Hier ist die Lösung:

  <input type="text" id="end_dt"/>

$(document).ready(function () {
    $("#end_dt").datepicker({ dateFormat: "MM/dd/yyyy" });
});

hoffentlich wird dies das Problem beheben :)

— Muhammad Waqas
quelle

1

Ihre Lösung verwendet keine HTML-Eingabe vom Datumstyp, sodass die Frage nicht wirklich beantwortet wird.

— Vincent

Sie müssen den Typ nicht auf Datum setzen. Für Datepicker funktioniert es ohne Datum. Probieren Sie es aus, hoffentlich wird es Ihr Problem lösen.

— Muhammad Waqas

-3

Das Format des Datumswerts ist 'YYYY-MM-DD'. Siehe folgendes Beispiel

<form>
<input value="2015-11-30" name='birthdate' type='date' class="form-control" placeholder="Date de naissance"/>
</form>

Alles was Sie brauchen, ist das Datum in PHP, Asp, Ruby oder was auch immer zu formatieren, um dieses Format zu haben.

— Charmi
quelle