¿Hay opciones de estilo para el selector de fechas HTML5?

Estoy realmente entusiasmado con el selector de fechas HTML5. Es refrescante saber que el W3C finalmente está tomando parte de la holgura para que no tengamos que seguir reinventando una forma de entrada tan común.

La advertencia es que no veo ni preveo mucho en la forma de aplicar colores al selector en sí, lo que hará que el uso del selector de fechas sea un factor decisivo en la mayoría de los sitios. El <select>sufre de hacks generalizados de reemplazo de javascript por la simple razón de que la gente no puede hacerlo bonito. Tengo curiosidad por saber si alguien sabe qué está pasando en la tierra del W3C.

Esto se combina de alguna manera con otra pregunta más grande (en caso de que conozca la respuesta): ¿Vale la pena mi tiempo para tratar de involucrarme con el W3C o WHATWG para que algunas de estas cosas vean la luz del día? Cualquier tipo de información es útil.

WebKit pone a disposición los siguientes ocho pseudo-elementos para personalizar el cuadro de texto de una entrada de fecha:

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

Entonces, si pensaba que la entrada de fecha podría usar más espaciado y un esquema de color ridículo, podría agregar lo siguiente:

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

Actualmente, no existe una forma sin secuencias de comandos de varios navegadores para diseñar un selector de fechas nativo.

En cuanto a lo que está sucediendo dentro de WHATWG / W3C ... Si esta funcionalidad surge, es probable que sea bajo el estándar CSS-UI o algún estándar relacionado con Shadow DOM . La página wiki de CSS4-UI enumera algunas cosas relacionadas con la apariencia que se eliminaron de CSS3-UI, pero para ser honesto, no parece haber mucho interés en el módulo CSS-UI.

Creo que su mejor opción para el desarrollo de navegadores cruzados en este momento es implementar controles bonitos con una interfaz basada en JavaScript, y luego deshabilitar la interfaz de usuario nativa HTML5 y reemplazarla. Creo que en el futuro, tal vez haya un mejor estilo de control nativo, pero quizás lo más probable sea la capacidad de cambiar un control nativo por su propio "widget" Shadow DOM.

Es molesto que esto no esté disponible, y siempre vale la pena solicitar soporte estándar. Aunque parece que el cliente potencial de jQuery UI lo intentó y no tuvo éxito .

Si bien todo esto es muy desalentador, también vale la pena considerar las ventajas del selector de fechas HTML5 y también por qué los estilos personalizados son difíciles y tal vez deberían evitarse. En algunas plataformas, el selector de fechas se ve extremadamente diferente y, personalmente, no puedo pensar en ninguna forma genérica de diseñar el selector de fechas nativo.

encontré esto en el github de Zurb

En caso de que quieras hacer un estilo más personalizado. Aquí está todo el CSS predeterminado para la representación webkit de los componentes de fecha.

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

Usé una combinación de las soluciones anteriores y algo de prueba y error para llegar a esta solución. Me tomó una cantidad de tiempo molesta, así que espero que esto pueda ayudar a alguien más en el futuro. También noté que Safari no admite la entrada del selector de fechas ...

Estoy usando componentes con estilo para representar una entrada de selector de fecha transparente como se muestra en la imagen a continuación:

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

Puede utilizar el siguiente CSS para diseñar el elemento de entrada.

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

Para su información, que necesitaba para actualizar el color del icono de calendario que no parece posible con propiedades como color, fill, etc.

Eventualmente descubrí que algunas filterpropiedades ajustarán el ícono, así que aunque no terminé descubriendo cómo hacerlo de ningún color, afortunadamente todo lo que necesitaba era hacerlo de modo que el ícono fuera visible sobre un fondo oscuro para poder hacerlo. Haz lo siguiente:

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>

Con suerte, esto ayuda a algunas personas, ya que en su mayor parte Chrome incluso dice directamente que esto es imposible.