Styling Html5 datepicker

Asked

Viewed 247 times

1

I know it’s possible to style input date of html5.

::-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" min='2019-10-12'>

However, as I stylize the days that are blocked by the attribute min ?

I would like to leave in red the days blocked.

css html5

  • I believe that it is not possible to style the calendar because every browser implements its own calendar in a different way. It is best to use alternative plugins for this like the datepicker of jquery or of bootstrap.

  • 2

    There is no way because the calendar is generated by the browser, and in fact it does not exist in the DOM, only the input.

1 answer

1

Any form of stylization of this datepicker generated by the browser would be no more than a mere gambiarra.

The most stable way that ensures compatibility between all browsers is to use a common input and create a datepicker in it.

This way is more laborious, but calm! There are people who have already solved their problem, follow the link of datepicker plugins that I use.

Bootstrap: https://bootstrap-datepicker.readthedocs.io/en/latest/

Materialize CSS: https://materializecss.com/pickers.html

I hope I helped, good luck!

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.