2

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í

0

4 respuestas 4

1

Hasta donde sé no se puede cambiar el estilo del calendario (enlace):

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.

Lo que sí se puede cambiar es la apariencia del input con pseudoclases webkit pero creo que eso no te interesa. Aquí te dejo un ejemplo obtenido de este codepen:

$(document).ready(function () {
    $('input[type="date"]').click();

});

function closeDate(dateInput) {
    $(dateInput).attr('type', 'text');
    $(dateInput).attr('type', 'date');
}
input[type=date] {
  height: 35px;
  margin: 0 auto;
  width: 100%;
  font-family: arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #959595;
  outline: none;
  border: 0;
  border-radius: 3px;
  padding: 0 3px;
  color: #fff;
}
input[type=date]::-webkit-datetime-edit-month-field {
  color: red;
}
input[type=date]::-webkit-datetime-edit-day-field {
  color: white;
}
input[type=date]::-webkit-datetime-edit-year-field {
  color: blue;
}
input[type=date]::-webkit-clear-button {
  font-size: 18px;
  height: 30px;
  position: relative;
  right: 5px;
  margin-right: 4px;
}
input[type=date]::-webkit-inner-spin-button {
  height: 30px;
}
input[type=date]::-webkit-calendar-picker-indicator {
  font-size: 18px;
}
input[type=date]::-webkit-calendar-picker-indicator:hover {
  background-color: #959595;
  color: #e6e6e6;
  cursor: pointer;
}
input[type=date]::-webkit-calendar-picker-indicator:active {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

1

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

0

Encontre una solucion , inspecciona el elemento y copia la clase, añade estilos con jquery por ejemplo

  $(".ui-datepicker table").css("background-color","red")

introducir la descripción de la imagen aquí

0

yo pude cambiar el color del icono que va dentro del input tipo date ; en mi caso solo quería cambiarlo a color blanco porque el fondo era oscuro .

input[type="date"]::-webkit-inner-spin-button,::-webkit-calendar-picker-indicator{
    filter: drop-shadow(16px 16px 20px rgb(255, 255, 255)) invert(100%);
}
input[type="date"]{
    background-color:pink;
}
<input type="date" />

input[type=date]::-webkit-inner-spin-button,::-webkit-calendar-picker-indicator{
filter: drop-shadow(16px 16px 20px rgb(255, 255, 255)) invert(100%);

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.