Input [type = 'date'] In HTML5 benutzerdefinierter Stil- und Kalenderüberprüfungsfunktion Implementierungscode

HTML5 bietet eine Kalenderkontrollfunktion und verkürzt die Entwicklungszeit, aber manchmal ist sein Stil wirklich nicht zufriedenstellend. Wir können sie nach dem folgenden Code selbst ändern.

Vorschlag: Kopieren Sie das folgende Codesegment und stellen Sie eine CSS -Datei separat ein, um uns zu ändern.

 /*Ändern Sie den Typ des Kalendersteuerungstyps*/:: -Webkit-dateTime-edit {padding: 1px;}/*den Bearbeitungsbereich*/:: -Webkit-dates-Feelds-Wrapper {Hintergrund-Color: #fff ; oder kurz oder kurz vor der Kontrolle des Jahres, des Monat und des Tages die horizontale Linie*/:: -Webkit-dateTime-Edit-Jahr-Field {Farbe: #333;}/*kontrolliert den jährlichen Text, wie der Ort besetzt Nach den vier Buchstaben im Jahr 2013* /:: Monthfeld {Farbe: #333;} /*Steuermonat* /:: -Webkit-DateTime-Day-Feld {Farbe: #333;} /*Control Special Days*Control Special Days* /::-webkit-rein-spin-button {Sichtbarkeit: versteckt;} /*Dies ist die Kontrolle kleiner Pfeile der oberen und unteren Pfeile* /:: -Webkit-Calendar-Picker-Identicator { /*Dies ist das Kontrolle des unteren Pfeils* /Rand: 1px #CCC; -Gradient (top, #f0f0f00, #e6e6e6);

Das Kündigungsdatum kann nicht geringer sein als das Startdatum, der Umfang der Datumsauswahl 7 Tage und der Rest des Zeitraums ist nicht verfügbar.

Hinweis: Das folgende Codesegment verwendet das JQuery -Prinzip

 // Die Konvertierungszeittyp ist YYYY-MM-DD-Funktionsformatierung (STRIME) {VAR DATE = NEW DATE (STRIME); = (0+) var d1 = neuer Datum ($ (this) .val ()); Zeit +1 Jahr d2.setdate (d2.getDate () +7); ) // Die maximale Zeit ist D2 $ (#keyword_time_max) .attr (min, $ (this) .val ()); . (D4.GetDate () -7);

Das obige ist der Implementierungscode der Eingabe [type = 'Date'] benutzerdefinierter Stil und Kalenderüberprüfung in HTML5, die von Xiaobian eingeführt wird. Der Herausgeber antwortete rechtzeitig auf alle. Vielen Dank für Ihre Unterstützung für die VEVB Wulin -Website!