Gibt es Stiloptionen für die HTML5-Datumsauswahl?

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.

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">

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.

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;
}

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:

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;}
`

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="" />

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.