Jack Johnson
Ich habe nur eine einfache Codezeile wie diese:
<input type="date" min='1899-01-01' max='2000-01-01'></input>
Gibt es eine einfache Möglichkeit, das maximale Datum auf “heute” anstelle von 2000-01-01 zu setzen? Oder muss ich dafür Javascript verwenden?
Shrinivas Pai
Dazu benötigen Sie Javascript:
HTML
<input id="datefield" type="date" min='1899-01-01' max='2000-13-13'></input>
JS
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
today = yyyy + '-' + mm + '-' + dd;
document.getElementById("datefield").setAttribute("max", today);
funktioniert perfekt. Ich wünschte, HTML5 würde solche Funktionen nativ anbieten oder viele flexible Optionen für das Datumsformat
– exexzian
26. August 16 um 14:40 Uhr
Zusätzlich zu den Front-End-Zuständen benötigen Sie je nach Fall wahrscheinlich auch eine serverseitige Validierung.
– Dirk Jan
15. Januar 20 um 10:27 Uhr
Ähm, ich versuche das, und es wird das maximale Datum nicht festlegen. Es lässt mich immer noch Daten außerhalb des Maximums auswählen, z. B. wenn heute der 25. Oktober war, lässt es mich den 26., 27., 28. usw. auswählen. Weiß jemand warum?
– Momori
8. April 20 um 5:31 Uhr
danke für die lösung, wie man vermeidet, dass der benutzer ein datum schreibt, das nicht erlaubt ist, eigentlich ist mit dieser lösung bei der auswahl des datums die regel richtig, aber erlaube das schreiben eines anderen datums der einschränkung
– Edwin Vasquez
7. Juli 20 um 6:34 Uhr
Das Element “Eingang” soll selbstschließend sein. <input id="datefield" type='date' min='1899-01-01' max='2000-13-13' />.
– Rick MacGillis
5. Dezember 2020 um 21:01 Uhr
Trine
JavaScript nur einfache Lösung
datePickerId.max = new Date().toISOString().split("T")[0];<input type="date" id="datePickerId" />// below trick also works! Thanks jymbob for the comment.
datePickerId.max = new Date().toLocaleDateString('en-ca')
@BrandenBarber sogar type="date" arbeitet nicht daran
– TRIN
11. März 20 um 16:29 Uhr
Es erscheint max Es wird derzeit nicht von iOS Safari unterstützt. Hier finden Sie Updates dazu caniuse.com/#search=input%20date
– Branden Friseur
11. März 20 um 20:41 Uhr
danke für die lösung, wie man vermeidet, dass der benutzer ein datum schreibt, das nicht erlaubt ist, eigentlich ist mit dieser lösung bei der auswahl des datums die regel richtig, aber erlaube das schreiben eines anderen datums der einschränkung
– Edwin Vasquez
7. Juli 20 um 6:35 Uhr
Danke an die hilfsbereiten Leute drüben in Nordamerika: today = new Date().toLocaleDateString('en-ca') – vermeidet seltsame Off-by-One-Probleme, wenn ISOString() wird nach UTC geparst
– Jymbob
16. September 21 um 10:27 Uhr
@jymbob Danke! Dies ist grundsätzlich für jeden Benutzer/Browser hilfreich, der eine Zeitzonenverschiebung hat (nicht nur Nordamerika). Es ist nicht so sehr, dass der ‘en-ca’-Teil irgendetwas mit der Zeitzone macht (das liegt an der toLocaleDateString -Methode), aber es kommt vor, dass das Gebietsschema „en-ca“ ein Datum genau so anzeigt, wie es das Eingabefeld erfordert (JJJ-MM-TT). Also auch für jede andere Zeitzone der Welt sollten Sie einfach ‘en-ca’ als Gebietsschema verwenden!
– Arno van Oordt
27. Januar um 16:01 Uhr
rau
Anstelle von Javascript könnte eine kürzere PHP-basierte Lösung sein:
<input type="date" name="date1" max="<?= date('Y-m-d'); ?>">
Sie sollten ein geeignetes Vorlagensystem verwenden, anstatt HTML- und PHP-Code zu mischen.
– bfontaine
8. August 17 um 14:55 Uhr
@bfontaine Sie haben offensichtlich kein PHP verwendet, da darin sowohl HTML als auch PHP gemischt sind
– Pulkit
8. Juli 18 um 23:25 Uhr
@Pulkit Die Tatsache, dass Sie können, bedeutet nicht, dass Sie sollten.
– bfontaine
9. Juli 18 um 8:33 Uhr
@bfontaine Mischen ist eine Frage der Wahl, manche Leute mögen Bier, manche mögen Cocktails, dieses Beispiel ist großartig und spart die Manipulationen mit js oder was auch immer Beispiel:
– Talsibon
17. Oktober 18 um 19:33 Uhr
Die @bfontaine-Lösung wird schlecht, wenn sie ein weiteres Problem verursacht. Ich glaube nicht, dass dies in irgendeiner Weise ein Problem verursacht. Im Allgemeinen ist das Mischen von PHP und HTML in derselben Datei überhaupt kein Problem.
– Talsibon
18. Oktober 18 um 16:09 Uhr
vmkcom
Javascript wird benötigt; zum Beispiel:
$(function(){
$('[type="date"]').prop('max', function(){
return new Date().toJSON().split('T')[0];
});
});
toISOString() gibt das aktuelle UTC-Datum an. Um also die aktuelle Ortszeit zu bekommen, müssen wir sie bekommen getTimezoneOffset() und von der aktuellen Zeit abziehen
document.getElementById('dt').max = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().split("T")[0];<input type="date" min='1899-01-01' id="dt" />danke für die lösung, wie man vermeidet, dass der benutzer ein datum schreibt, das nicht erlaubt ist, eigentlich ist mit dieser lösung bei der auswahl des datums die regel richtig, aber erlaube das schreiben eines anderen datums der einschränkung
– Edwin Vasquez
7. Juli 20 um 6:34 Uhr
Strabek
Ich verwende Laravel 7.x mit Blade-Templating und verwende:
<input ... max="{{ now()->toDateString('Y-m-d') }}">
danke für die lösung, wie man vermeidet, dass der benutzer ein datum schreibt, das nicht erlaubt ist, eigentlich ist mit dieser lösung bei der auswahl des datums die regel richtig, aber erlaube das schreiben eines anderen datums der einschränkung
– Edwin Vasquez
7. Juli 20 um 6:34 Uhr
Matt Feld
Ja und nein. Es gibt Min- und Max-Attribute in HTML 5, aber
Das max-Attribut funktioniert nicht für Datum und Uhrzeit in Internet Explorer 10+ oder Firefox, da IE 10+ und Firefox diese Eingabetypen nicht unterstützen.
BEARBEITEN: Firefox unterstützt es jetzt
Wenn Sie also durch die Dokumentation dieser Attribute verwirrt sind, es aber nicht funktioniert, ist das der Grund.
Siehe die W3-Seite für die Versionen.
Ich finde es am einfachsten, Javascript zu verwenden, wie die anderen Antworten sagen, da Sie einfach ein vorgefertigtes Modul verwenden können. Außerdem haben viele Javascript-Datumsauswahlbibliotheken eine Min/Max-Einstellung und haben diesen schönen Kalender-Look.
.
