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


109

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.


No lo he probado debido a la falta de soporte que tenía, pero supongo que el estilo es mínimo según la <select>entrada.
James Coyle

Debo decir que las cosas avanzan muy lentamente en el mundo del W3C. Los desarrolladores / empresas de navegadores preferirán trasladarse a donde haya interés. Ellos (los navegadores) serán reacios a implementar cosas que no estén bien especificadas en el W3C (y preparar esos documentos llevará tiempo). Más gente más rápido se pueden lograr las cosas. Entonces, sí, si tiene interés, únase a su lista de correo y comience a involucrarse.
lepe

Respuestas:


220

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

Captura de pantalla


2
el uso de input [type = "date"] funcionó para mis propósitos y tal vez también funcione para otra persona.
Elon Zito

¿Hay alguna forma de cambiar el carácter separador? ¿Alguien sabe?
Keith Ivison

2
Tenga en cuenta que también puede diseñar el botón borrar con la pseudoclase::-webkit-clear-button
Gabriel Duarte

@Anselm ¿Hay alguna forma de abrir el selector de fechas al hacer clic dentro del cuadro de texto?
Olvidé el

Una fuente para estas pseudoclases haría que esta sea una respuesta aún mejor ...
Heretic Monkey

22

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.


Y un año y medio después, todavía no hay una forma de usar el navegador cruzado para diseñarlos. Además, ¡ni siquiera hay una entrada de fecha entre navegadores! IE y FF todavía no cooperarán.
Mr Lister

2
¿Tenemos alguno hoy?
2018

12

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

1
¡Gracias, Justin! Las cosas se ven más brillantes a medida que pasan los meses. Especialmente con Shadow DOM que se expone más fácilmente en el inspector web de Chrome.
Wray Bowling

3

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:

imagen de la entrada del selector de fecha

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

2

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


¿Hay alguna forma de abrir el selector de fechas al hacer clic dentro del cuadro de texto?
Olvidé el

0

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.


1
¿Hay alguna forma de abrir el selector de fechas al hacer clic dentro del cuadro de texto?
Olvidé el
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.