07.03.2025

Desabilitando o Seletor de Data Nativo no Google Chrome: Um Guia

Resposta Rápida

Se você deseja desabilitar o calendário integrado do Chrome para o elemento input[type="date"], aplique a propriedade CSS -webkit-appearance com o valor none:

input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
}

Dessa forma, o campo <input type="date"> ficará sem a sua estilização padrão, preparado para estilizações personalizadas ou o uso de um widget de calendário externo.

Personalização do Campo de Data Passo a Passo

Alterar a interface do usuário e substituir o calendário nativo no Chrome para garantir consistência entre diferentes navegadores é uma tarefa viável. Sua jornada começa aqui.

1. Ocultando Indicadores Visuais

Primeiro, você precisa remover o ícone do calendário e os botões de rolagem:

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-outer-spin-button {
    display: none;
}

2. Removendo Implicitamente o Placeholder

Ocultar o placeholder dará um visual elegante à sua personalização. Veja como fazer isso:

input[type="date"]::-webkit-input-placeholder {
    visibility: hidden !important;
}

3. Preparando o Campo para Substituição

Agora é hora de anexar um calendário JavaScript compatível com diferentes navegadores, como o jQuery UI. Use o Modernizr para verificar o suporte do navegador ao elemento input[type="date"]:

if (!Modernizr.inputtypes.date) {
    $('input[type="date"]').datepicker();
}

Você pode mudar o tipo do campo de type=date para type=text para melhorar a compatibilidade:

$('input[type="date"]').attr('type', 'text').datepicker();

Estilize o campo de texto para que ele pareça idêntico ao campo de data.

4. Estilizando a Nova Interface do Usuário

Não se esqueça de criar um estilo para o seu calendário personalizado antes de integrá-lo:

.custom-datepicker {
    /* Seu estilo */
}

E use este calendário estilizado na sua marcação:

<input type="date" class="custom-datepicker">

Visualização

O que significa desabilitar o calendário nativo? Vamos visualizar isso:

O calendário padrão é como um balão 🎈, preso ao campo de entrada.

Estado Inicial: 📅 (Campo) + 🎈 (Calendário Nativo)

Ao desabilitá-lo, essencialmente estamos deixando o balão ir, deixando o campo de entrada no chão:

Estado Alterado: 📅 (Campo) - 🎈 (Calendário Solto)

Agora, o campo está disponível para entrada manual ou integração com um calendário personalizado.

Ajustando Seu Calendário

A atenção aos detalhes pode fazer seu produto se destacar:

Priorize Dispositivos Móveis:

Criar um calendário voltado para dispositivos móveis melhorará significativamente a experiência de interação.

Autocomplete e Acessibilidade:

Os campos de entrada devem seguir rigorosamente os princípios de acessibilidade usando os atributos autocomplete e aria-label:

<input type="date" autocomplete="bday" aria-label="Informe a data de nascimento">

Formato de Data Consistente:

Respeitar as preferências culturais dos usuários é importante ao determinar o formato de exibição da data.

Recursos Úteis

1. Discussão sobre desabilitar o calendário nativo do Chrome no Stack Overflow — experiências e soluções dos usuários.
2. <input type="date"> - HTML: Linguagem de Marcação de Hipertexto | MDN — descrição detalhada do elemento de entrada de data HTML pela Mozilla.
3. Blog do Chromium — atualizações e dicas dos desenvolvedores do Chrome.
4. Estilizando Controles de Entrada de Intervalo Cross-Browser em CSS | CSS-Tricks — sugestões para estilização de formulários.
5. Tipos de Entrada de Data e Hora | Can I use... — checando o suporte a elementos de entrada HTML5 em vários navegadores.
6. Aprendendo Formulários | web.dev — recurso para criação de formulários no desenvolvimento web moderno.
7. Tipos de Entrada em HTML — visão geral dos diversos tipos de campos de entrada em HTML.

Video

Navigation