seleccionar - ¿Hay alguna opción de estilo para el selector de fecha HTML5?
insertar fecha en formulario html (5)
Estoy muy entusiasmado con el selector de fecha HTML5. Es refrescante saber que el W3C finalmente está recuperando parte de la holgura para que no tengamos que seguir reinventando una forma de entrada tan común.
La advertencia es que no veo o preveo mucho en la forma de aplicar colores al selector en sí mismo, lo que hará que el uso del marcador 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 sencilla razón de que las personas no pueden hacerlo bonito. Tengo curiosidad si alguien sabe lo que está pasando en tierra del W3C.
Esto se empareja con otra pregunta más amplia (en caso de que conozca la respuesta): ¿Merece la pena intentar involucrarme con el W3C o WHATWG para que algunas de estas cosas vean la luz? Cualquier tipo de información es útil.
Actualmente, no existe una forma cruzada de script-free para diseñar un selector de fecha nativo.
En cuanto a lo que sucede dentro de WHATWG / W3C ... Si esta funcionalidad surge, probablemente estará 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 un gran interés en el módulo CSS-UI.
Creo que su mejor apuesta para el desarrollo de navegador cruzado en este momento es implementar controles bonitos con una interfaz basada en JavaScript, y luego desactivar la interfaz de usuario nativa HTML5 y reemplazarla. Creo que en el futuro, tal vez habrá un mejor estilo de control nativo, pero tal vez sea más probable la posibilidad de cambiar un control nativo para su propio "widget" Shadow DOM.
Es molesto que esto no esté disponible, y la petición de soporte estándar siempre vale la pena. Aunque parece que el indicador de jQuery UI lo intentó y no tuvo éxito .
Aunque todo esto es muy desalentador, también vale la pena considerar las ventajas del selector de fecha HTML5, y también por qué los estilos personalizados son difíciles y quizás deberían evitarse. En algunas plataformas, el datepicker se ve extremadamente diferente y personalmente no puedo pensar en ninguna forma genérica de diseñar el datepicker nativo.
Espero que esto ayude!
**HTML:**
<input type="date" value="From" name="from" placeholder="From" required=""/>
**CSS**
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;
}
La entrada de fecha y hora se puede personalizar como.
<input type=date step=7 min=2014-09-08> - Monday only
- Incrementos de 15 m
Los siguientes ocho pseudo-elementos están disponibles por WebKit para personalizar un cuadro de texto de 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 crees que la entrada de fecha podría usar más espaciado y un esquema de color ridículo, podrías 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">
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 de webkit de los componentes de la 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;
}