Home / Questions / 229840
Accepted
Juan
Asked: 2020-01-16 08:19:19 +0800 CST 2020-01-16 08:19:19 +0800 CST

Datepicker style in a date type input (date)

  • 772

Is it possible to add a very marked css class such as a black background to the days that cannot be selected in the calendar (min="current day")? As you can see in the image, the days that cannot be selected have a very gray color. Clearly, users with visual impairment have access to that page.

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

enter image description here

html

3 Answers

  1. As far as I know you can't change the style of the calendar ( link ):

    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.

    What can be changed is the appearance of the input with pseudo classes webkitbut I think that you are not interested. Here is an example obtained from this 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
  2. Best Answer

    Basically it is NOT possible at this moment to change the styles of the datepicker, being an implementation dependent on the technology of each browser, each one of these would need its own way of styling (there is something for Chrome, Vivaldi and Opera but it only affects the field and not the date picker).

    There is more information about it on MDN: https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input/date

    As for Chrome, the Developers blog explains that there is no way (for now) to change the style of the 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.

    The part that interests us is the one in bold in the paragraph (approximate translation):

    You cannot currently change the style/appearance of the date picker.

    Said information is updated until January 14, 2019.

    More information (in English) at the following link: https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome

    • 1

  3. I was able to change the color of the icon that goes inside the input type date ; in my case I just wanted to change it to white color because the background was dark.

    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%);

    }

    • 0