Esistono opzioni di stile per il selettore di date HTML5?

Sono davvero entusiasta del selettore di date HTML5. È piacevole sapere che il W3C sta finalmente riprendendo un po 'di flessibilità, quindi non dobbiamo continuare a reinventare una forma di input così comune.

L'avvertenza è che non vedo o prevedo molto nel modo in cui applicare i colori al selettore stesso, il che renderà l'uso del datepicker come un rompicapo sulla maggior parte dei siti. I <select>soffre diffuse hack javascript-sostituzione per il semplice motivo che la gente non può rendere abbastanza. Sono curioso di sapere se qualcuno sa cosa sta succedendo nella terra del W3C?

Questo è in qualche modo accoppiato con un'altra domanda più ampia (nel caso in cui conosci la risposta): vale la pena dedicare il mio tempo a provare a partecipare al W3C o a WHATWG in modo che alcune di queste cose vedano la luce del giorno? Qualsiasi tipo di intuizione è utile.

I seguenti otto pseudo-elementi sono resi disponibili da WebKit per personalizzare la casella di testo di un input di data:

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

Quindi, se pensavi che l'inserimento della data potesse utilizzare più spaziatura e uno schema di colori ridicolo, potresti aggiungere quanto segue:

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

Al momento, non esiste un modo cross browser e privo di script per applicare lo stile a un selettore di date nativo.

Per quanto riguarda cosa sta succedendo all'interno di WHATWG / W3C ... Se questa funzionalità emerge, probabilmente sarà sotto lo standard CSS-UI o qualche standard correlato a Shadow DOM . La pagina wiki CSS4-UI elenca alcune cose relative all'aspetto che sono state eliminate da CSS3-UI, ma ad essere onesti, non sembra esserci molto interesse per il modulo CSS-UI.

Penso che la soluzione migliore per lo sviluppo cross browser in questo momento sia implementare controlli graziosi con un'interfaccia basata su JavaScript, quindi disabilitare l'interfaccia utente nativa HTML5 e sostituirla. Penso che in futuro, forse ci sarà uno stile di controllo nativo migliore, ma forse più probabile sarà la possibilità di sostituire un controllo nativo con il tuo "widget" Shadow DOM.

È fastidioso che questo non sia disponibile e vale sempre la pena fare una petizione per il supporto standard. Anche se sembra che il lead di jQuery UI abbia provato e non abbia avuto successo .

Sebbene tutto ciò sia molto scoraggiante, vale anche la pena considerare i vantaggi del selettore di date HTML5 e anche perché gli stili personalizzati sono difficili e forse dovrebbero essere evitati. Su alcune piattaforme, il datepicker sembra estremamente diverso e personalmente non riesco a pensare a nessun modo generico di disegnare il datepicker nativo.

ho trovato questo su GitHub di Zurb

Nel caso in cui desideri creare uno stile più personalizzato. Ecco tutti i CSS predefiniti per il rendering webkit dei componenti della data.

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

Ho usato una combinazione delle soluzioni di cui sopra e alcuni tentativi ed errori per arrivare a questa soluzione. Mi ci è voluto molto tempo, quindi spero che questo possa aiutare qualcun altro in futuro. Ho anche notato che l'input del selettore di date non è affatto supportato da Safari ...

Sto usando componenti in stile per rendere un input di selezione data trasparente come mostrato nell'immagine qui sotto:

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

È possibile utilizzare il seguente CSS per definire lo stile dell'elemento di input.

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

Cordiali saluti, ho bisogno di aggiornare il colore dell'icona del calendario che non sembrava possibile con immobili come color, fillecc

Alla fine ho capito che alcune filterproprietà aggiusteranno l'icona, quindi anche se non ho finito per capire come renderla qualsiasi colore, fortunatamente tutto ciò di cui avevo bisogno era di farlo in modo che l'icona fosse visibile su uno sfondo scuro, quindi sono stato in grado di farlo eseguire le seguenti operazioni:

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>

Si spera che questo aiuti alcune persone poiché per la maggior parte chrome dice anche direttamente che è impossibile.