1

Sei que é possível estilizar o input date do 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'>

Porém, como eu estilizo os dias que estão bloqueados pelo atributo min ?

Gostaria de deixar em vermelho os dias bloqueados.

2
  • Acredito que não seja possível estilizar o calendário pois todo navegador implementa seu próprio calendário de maneira diferente. É melhor utilizar plugins alternativos para isso como o datepicker do jquery ou do bootstrap. Commented 3/09/2019 às 18:22
  • 2
    Não tem como porque o calendário é gerado pelo navegador, e na verdade ele não existe no DOM, apenas o input.
    – Sam
    Commented 3/09/2019 às 18:30

1 Resposta 1

1

Qualquer forma de estilização deste datepicker gerado pelo navegador não passaria de uma mera gambiarra.

A forma mais estável e que garante a compatibilidade entre todos os navegadores é usar um input comum e criar um datepicker nele.

Essa forma é mais trabalhosa, mas calma! Têm pessoas que já resolveram seu problema, segue o link dos plugins de datepicker que eu costumo usar.

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

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

Espero ter ajudado, boa sorte!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .