Estilo datepicker en un input tipo fecha (date)

publicado por: Anonymous

Es posible agregar una clase css muy marcada como un fondo negro a los días que no se pueden seleccionar en el calendario (min=”dia actual”)?, como pueden ver en la imagen los días que no se pueden seleccionar tienen un gris muy claro y a esa pagina tienen acceso usuarios con disminución visual.

<input type="date" name="fechaInicio" id="fechaInicio" 
min="2019-01-15" max="2020-01-01" class="readonly">

<script>
 $(".readonly").keydown(function(e){
    e.preventDefault();
});
</script>

introducir la descripción de la imagen aquí

solución

Básicamente NO es posible en este momento cambiar los estilos del datepicker, al ser una implementación dependiente de la tecnología de cada navegador, cada uno de estos necesitaría su propia forma de dar estilo (hay algo para Chrome, Vivaldi y Opera pero solo afecta el campo y no el seleccionador de fecha).

En MDN hay más información al respecto:
https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input/date

En cuanto a Chrome, en el blog de Developers se explica que no hay forma (por ahora) de cambiar el estilo del datepicker:

How do I change the appearance of the date picker?

You cannot currently style the appearance of the date picker. In WebKit, we have previously provided ways to style form controls with the -webkit-appearance CSS property or the ::-webkit-foo pseudo class selector. However the calendar popup does not provide such ways in WebKit because it is separate from the document, like a popup menu for , and there is not currently a standard for how to control styling on its sub-elements.

La parte que nos interesa es la que está en negrilla en el párrafo (traducción aproximada):

Ud. no puede cambiar actualmente el estilo/apariencia del seleccionador de fechas.

Dicha información se encuentra actualizada hasta el 14 de enero de 2019.

Más información (en inglés) en el siguiente enlace: https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *