09.03.2025

Desativando a Seleção de Horário no Bootstrap DateTime Picker: Uma Solução

Resposta Rápida

Se você precisa que o Bootstrap permita apenas a entrada de data no seletor, aplique a propriedade format com o valor 'YYYY-MM-DD' ao inicializar o seletor:

$('.datetimepicker').datetimepicker({
    format: 'YYYY-MM-DD' // O formato especificado é aplicado, e o horário é excluído
});

Dessa forma, o usuário poderá selecionar apenas uma data sem especificar um horário.

Aprofundando: Configurando a Exibição Apenas da Data

Desativar a seleção de horário é conseguido ao definir um formato específico. Ao especificar o valor 'YYYY-MM-DD', o seletor de data e hora simplesmente se transforma em um seletor de data.

Se for importante para você acomodar diferentes localizações, considere usar a biblioteca Moment.js junto com o formato 'L', que se adapta às configurações regionais de formato de data:

$('.datetimepicker').datetimepicker({
    format: 'L' // Esta configuração elimina possíveis confusões entre os formatos de data
});

A Abordagem Deve Ser Adaptada à Versão do Bootstrap

O método para desativar a seleção de horário depende da versão do Bootstrap:

• Na versão 3, você pode conseguir isso usando o parâmetro pickTime: false:

$('#datetimepicker4').datetimepicker({
    pickTime: false // A seleção de horário está desativada
});

• Na versão 4, simplesmente omitir o horário no formato fará com que a opção de seleção de horário desapareça.

Utilize Moment.js para Localização

Ao utilizar a biblioteca Moment.js, que suporta diversos formatos regionais de data e hora, seu seletor será amigável para pessoas de todo o mundo. Mais informações podem ser encontradas na documentação do Moment.js.

Visualização

Excluir a seleção de horário do seletor de data e hora no Bootstrap pode ser comparado a desligar o alarme em um relógio digital:

Seletor de data e hora Bootstrap (📅🕒): [Data + Hora]
Estado desejado: [Apenas Data 📅]

Assim, resulta que o recurso de seleção de horário está desativado 🛠️:

Antes: [📅+⏰]
Agora: [📅]
📅🚫⏰: Sua data estará sem surpresas — você sabe claramente a data!

Harmonize o Design com o Tema do Seu Site

Para uma melhor integração ao design geral do site, utilize as classes do Bootstrap .container e .row ao estilizar o seletor de data e hora.

Assegure uma Interface de Usuário Consistente

Faça as alterações apropriadas no layout da interface:

• Remova o ícone glyphicon-time, que sinalizará a ausência de seleção de horário.
• Certifique-se de que o layout do seletor corresponda à classe 'form-control' para manter a consistência geral do estilo.

Verificação e Testes

Teste minuciosamente o componente modificado para garantir que funcione corretamente:

$('#datetimepicker4').on("dp.change", function(e) {
    console.log(e.date);
    // Você pode ver a data do evento selecionado
});

Isso ajudará a confirmar que o seletor funciona como esperado.

Recursos Úteis

1. Tempus Dominus - Bootstrap 4 — Documentação oficial para o seletor de data e hora do Bootstrap.
2. GitHub - Eonasdan/tempus-dominus: Um poderoso widget de seletor de data/hora. — Repositório do GitHub para o componente Bootstrap por Eonasdan.
3. Moment.js | Docs — Documentação detalhada para trabalhar com datas e horas na biblioteca Moment.js.
4. HTML: HyperText Markup Language (MDN) — Guia abrangente da Mozilla sobre elementos de entrada de data e hora em HTML5.
5. Estilizando Elementos de Entrada Cross-Browser com CSS — Dicas úteis do CSS-Tricks para estilizar elementos de formulário em diferentes navegadores.
6. Tudo sobre Formulários HTML5 e Tipos de Entrada — Informações detalhadas sobre formulários e tipos de entrada em HTML5.

Video

Navigation