Gibt es Stiloptionen für die HTML5-Datumsauswahl?

108

Ich bin wirklich begeistert von der HTML5-Datumsauswahl. Es ist erfrischend zu wissen, dass das W3C endlich etwas von dem Durchhang aufnimmt, damit wir eine so übliche Form der Eingabe nicht immer wieder neu erfinden müssen.

Die Einschränkung ist, dass ich nicht viel in der Art und Weise sehe oder voraussehe, wie Farben auf den Picker selbst angewendet werden, was die Verwendung des Datepickers auf den meisten Websites zu einem Deal-Breaker machen wird. Der <select>leidet unter weit verbreiteten Javascript-Ersatz-Hacks aus dem einfachen Grund, dass die Leute es nicht hübsch machen können. Ich bin gespannt, ob jemand weiß, was im W3C-Land los ist.

Dies ist etwas gepaart mit einer anderen größeren Frage (falls Sie die Antwort kennen): Lohnt es sich, mich mit dem W3C oder WHATWG zu beschäftigen, damit einige dieser Dinge das Licht der Welt erblicken? Jede Art von Einsicht ist hilfreich.

Wray Bowling
quelle
Ich habe es aufgrund des Mangels an Unterstützung nicht ausprobiert, aber ich vermute, dass das Styling durch die <select>Eingabe minimal ist .
James Coyle
Ich muss sagen, dass die Dinge in der W3C-Welt sehr langsam voranschreiten. Entwickler / Unternehmen von Browsern ziehen es vor, dorthin zu ziehen, wo Interesse besteht. Sie (Browser) zögern, Dinge zu implementieren, die in W3C nicht genau spezifiziert sind (und das Kochen dieser Dokumente braucht Zeit). Je schneller die Menschen die Dinge erreichen können. Also, ja, wenn Sie Interesse haben, treten Sie ihrer Mailingliste bei und engagieren Sie sich.
Lepe

Antworten:

220

Die folgenden acht Pseudoelemente werden von WebKit zum Anpassen des Textfelds einer Datumseingabe zur Verfügung gestellt:

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

Wenn Sie also der Meinung sind, dass die Datumseingabe mehr Abstand und ein lächerliches Farbschema verwenden könnte, können Sie Folgendes hinzufügen:

::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }
<input type="date">

Bildschirmfoto

Anselm
quelle
2
Die Verwendung von input [type = "date"] hat für meine Zwecke funktioniert, und vielleicht funktioniert das auch für jemand anderen.
Elon Zito
Gibt es eine Möglichkeit, das Trennzeichen zu ändern, weiß jemand?
Keith Ivison
2
Beachten Sie, dass Sie den ::-webkit-clear-button
Gabriel Duarte
@Anselm Gibt es eine Möglichkeit, die Datumsauswahl beim Klicken in das Textfeld zu öffnen?
vergessen
Eine Quelle für diese Pseudoklassen würde dies zu einer noch besseren Antwort machen ...
Heretic Monkey
22

Derzeit gibt es keine browserübergreifende, skriptfreie Möglichkeit, eine native Datumsauswahl zu gestalten.

Was in WHATWG / W3C vor sich geht ... Wenn diese Funktionalität auftritt, wird sie wahrscheinlich unter dem CSS-UI- Standard oder einem Shadow DOM- bezogenen Standard liegen. Auf der CSS4-UI-Wiki-Seite sind einige Dinge aufgeführt, die sich auf das Erscheinungsbild beziehen und aus CSS3-UI entfernt wurden. Um ehrlich zu sein, scheint das CSS-UI-Modul kein großes Interesse zu haben.

Ich denke, Ihre beste Wahl für die Cross-Browser-Entwicklung besteht derzeit darin, hübsche Steuerelemente mit einer JavaScript-basierten Oberfläche zu implementieren und dann die native HTML5-Benutzeroberfläche zu deaktivieren und zu ersetzen. Ich denke, in Zukunft wird es vielleicht ein besseres natives Steuerelement-Styling geben, aber vielleicht wird es wahrscheinlicher sein, ein natives Steuerelement gegen Ihr eigenes Shadow DOM- "Widget" auszutauschen.

Es ist ärgerlich, dass dies nicht verfügbar ist, und es lohnt sich immer, um Standardunterstützung zu bitten. Obwohl es so aussieht, als hätte der Lead von jQuery UI es versucht und war erfolglos .

Dies ist zwar alles sehr entmutigend, es lohnt sich jedoch auch, die Vorteile der HTML5-Datumsauswahl zu berücksichtigen und auch zu erklären, warum benutzerdefinierte Stile schwierig sind und möglicherweise vermieden werden sollten. Auf einigen Plattformen sieht der Datepicker extrem anders aus, und ich persönlich kann mir keine generische Art vorstellen, den nativen Datepicker zu gestalten.

Cameron
quelle
Und eineinhalb Jahre später gibt es immer noch keine Crosbrowser-Methode, um diese zu stylen. Außerdem gibt es nicht einmal eine Crossbrowser-Datumseingabe! IE und FF werden immer noch nicht zusammenarbeiten.
Herr Lister
2
Haben wir heute welche?
Aks
12

fand dies auf Zurb's Github

Für den Fall, dass Sie mehr benutzerdefiniertes Styling durchführen möchten. Hier finden Sie alle Standard-CSS für das Webkit-Rendering der Datumskomponenten.

input[type="date"] {
     -webkit-align-items: center;
     display: -webkit-inline-flex;
     font-family: monospace;
     overflow: hidden;
     padding: 0;
     -webkit-padding-start: 1px;
}

input::-webkit-datetime-edit {
    -webkit-flex: 1;
    -webkit-user-modify: read-only !important;
    display: inline-block;
    min-width: 0;
    overflow: hidden;
}

input::-webkit-datetime-edit-fields-wrapper {
    -webkit-user-modify: read-only !important;
    display: inline-block;
    padding: 1px 0;
    white-space: pre;
}
Justin Moore
quelle
1
Danke, Justin! Mit den Monaten sieht es wirklich besser aus. Insbesondere, wenn das Shadow DOM im Webinspektor von Chrome leichter verfügbar gemacht werden kann.
Wray Bowling
3

Ich habe eine Kombination der oben genannten Lösungen und einige Versuche und Irrtümer verwendet, um zu dieser Lösung zu gelangen. Ich habe nervig viel Zeit gebraucht und hoffe, dass dies in Zukunft jemand anderem helfen kann. Mir ist auch aufgefallen, dass die Eingabe der Datumsauswahl von Safari überhaupt nicht unterstützt wird ...

Ich verwende Styled-Komponenten, um eine transparente Datumsauswahl zu rendern, wie in der Abbildung unten gezeigt:

Bild der Datumsauswahl

const StyledInput = styled.input`
  appearance: none;
  box-sizing: border-box;
  border: 1px solid black;
  background: transparent;
  font-size: 1.5rem;
  padding: 8px;
  ::-webkit-datetime-edit-text { padding: 0 2rem; }
  ::-webkit-datetime-edit-month-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-day-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-year-field { text-transform: uppercase; }
  ::-webkit-inner-spin-button { display: none; }
  ::-webkit-calendar-picker-indicator { background: transparent;}
`
Jean-Marie Dalmasso
quelle
2

Sie können das folgende CSS verwenden, um das Eingabeelement zu formatieren.

input[type="date"] {
  background-color: red;
  outline: none;
}

input[type="date"]::-webkit-clear-button {
  font-size: 18px;
  height: 30px;
  position: relative;
}

input[type="date"]::-webkit-inner-spin-button {
  height: 28px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  font-size: 15px;
}
<input type="date" value="From" name="from" placeholder="From" required="" />

Vignesh Waran
quelle
Gibt es eine Möglichkeit, die Datumsauswahl zu öffnen, wenn Sie in das Textfeld klicken?
vergessen
0

FYI, ich brauchte die Farbe des Kalendersymbol zu aktualisieren , die nicht möglich schien sich mit Eigenschaften wie color, fillusw.

Ich habe schließlich herausgefunden, dass einige filterEigenschaften das Symbol anpassen werden, so dass ich, obwohl ich nicht herausgefunden habe, wie ich es in irgendeiner Farbe gestalten kann, zum Glück alles, was ich brauchte, war, es so zu gestalten, dass das Symbol auf einem dunklen Hintergrund sichtbar war, damit ich es konnte Mach Folgendes:

body { background: black; }

input[type="date"] { 
  background: transparent;
  color: white;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(100%);
}
<body>
 <input type="date" />
</body>

Hoffentlich hilft dies einigen Leuten, da Chrom sogar direkt sagt, dass dies unmöglich ist.

Braden Rockwell Napier
quelle
1
Gibt es eine Möglichkeit, die Datumsauswahl zu öffnen, wenn Sie in das Textfeld klicken?
vergessen