web-dev-qa-db-de.com

Wie kann ich das Datumsformat im HTML-Datumseingabe-Tag einstellen?

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

96
Piotr

ich denke, es gibt keine Lösung, wenn nur HTML verwendet wird
Ich denke, Sie sollten Jquery verwenden
das geeignete Jquery-Plugin ist jQuery Masked Input

21
gamehelp16

Ich habe dieselbe Frage oder verwandte Frage in Stackoverflow gefunden 

Gibt es eine Möglichkeit, den Eingabetyp = Datumsformat zu ändern?

Ich habe eine einfache Lösung gefunden, Sie können kein Partikelformat angeben, aber Sie können 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:

 enter image description here

10
ashish bhatt

Du nicht.

Erstens ist Ihre Frage mehrdeutig - 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 und nicht an irgendetwas, das Sie im HTML-Code angeben. Normalerweise würde ich davon ausgehen, dass es auf dem Datumsformat basiert, das in den Ländereinstellungen des Betriebssystems festgelegt ist. Es macht keinen Sinn, es mit Ihrem eigenen bevorzugten Format zu überschreiben, da das Format, in dem es angezeigt wird, (in der Regel) das richtige für das Gebietsschema des Benutzers und das Format ist, in dem der Benutzer Datumsangaben schreibt.

Wenn Sie das Format angeben, in dem es an den Server übertragen wird, versuchen Sie, das falsche Problem zu beheben. Was Sie tun müssen, ist den serverseitigen Code so zu programmieren, dass er Daten im Format JJJJ-MM-TT akzeptiert.

9
Stewart

Wenn Sie jQuery verwenden, finden Sie hier eine 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)
5
sean.boyer

Ich habe viel recherchiert und glaube nicht, dass man das Format des <input type="date">..__ erzwingen kann. Der Browser wählt das lokale Format aus, und je nach den Benutzereinstellungen wird das Datum angezeigt, wenn die Benutzersprache in Englisch ist das englische Format (MM/TT/JJJJ).

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 das localization , date-Format ...

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

Hier ist die Lösung:

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

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

hoffentlich wird das Problem dadurch behoben :)

1
Muhammad Waqas

Ich denke, in HTML gibt es keine Syntax für das Format DD-MM-YYYY. Siehe diese Seite http://www.Java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm . Etwas, es wird dir helfen. Verwenden Sie sonst Javascript-Datumsauswahl. 

1

Ich weiß es nicht genau, aber ich denke, dass dies vom Browser basierend auf den Datums-/Uhrzeiteinstellungen des Benutzers gehandhabt werden soll. Stellen Sie Ihren Computer so ein, dass er Daten in diesem Format anzeigt.

1
Syntax Error

Verwenden Sie das html5 Date Control so, wie es ist, zusammen mit anderen Attributen, mit denen es in Browsern, die den Datumstyp unterstützen, einwandfrei funktioniert, und auch in anderen Browsern wie Firefox, das den Datumstyp noch unterstützt

<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"/>
1
Paul I.E

Für die Formatierung in mm-tt-jjjj

aa = date.split ("-")

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

0
Abilash Raghu

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

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

Das Datum, das von einer Eingabe akzeptiert wird, führt zu einem String, der als 'yyyy-mm-dd' formatiert ist. Wir können es aufteilen und als neues Datum () richtig 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 Date () erstellen und von dort aus alle Informationen abrufen ... oder verwenden Sie einfach "userDate []", um Ihre Zeichenfolge zu erstellen.

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

0
thielr7

kurze direkte antwort ist nein oder nicht aus der box, aber ich habe eine methode gefunden, ein textfeld und reinen jS-code zu verwenden, um die datumsvorgabe zu simulieren und ein beliebiges format zu machen, 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 keinen Datumstyp unterstützen und das Aussehen auf eine normale Texteingabe setzen.

3- Wenn Sie diesen Code für mehrere Datumseingaben auf Ihrer Seite verwenden möchten, ändern Sie die ID "xTime" der Texteingabe in beiden Funktionsaufrufen und der Eingabe selbst in etwas anderes und verwenden Sie natürlich den Namen der gewünschten Eingabe Formular absenden.

Mit der zweiten Funktion können Sie anstelle von Tag + "/" + Monat + "/" + Jahr jedes gewünschte Format verwenden, beispielsweise Jahr + "/" + Monat + "/" + Tag und in der Texteingabe einen Platzhalter oder einen Wert als verwenden yyyy/mm/dd für den Benutzer, wenn die Seite geladen wird.

0
shady
<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>
0
pala dattadri

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>
0
James Perih