Criar entrada de data e hora minimalista Selecione com Flatpickr
Um dos campos mais difíceis de criar é o data / hora selecione. Os desenvolvedores recorrem frequentemente a menus simples selecionados para o mês / dia / ano ou dependem de vários plug-ins para fazer o trabalho.
Selecione campos funcionam bem, mas eles são um pouco desajeitados. Em vez disso, você pode incrementar seu formulário com o Plugin Flatpickr. É um seletor de calendário JavaScript gratuito e de código aberto com zero dependências.
isso foi projetado com o minimalismo em mente, por isso pode caber em qualquer layout de site, qualquer formulário da web e deve ser utilizável de qualquer dispositivo moderno.
Uma coisa legal sobre esse plugin é o variedade de opções personalizadas. Você pode alterar a aparência das datas no campo de texto e onde o calendário é iniciado (o padrão é “hoje”).
Mas você também pode usá-lo estritamente como um selecionador de data se você não precisa da seleção do tempo. É apenas um recurso opcional que permite que você passe mais dados pelo formulário com esse selecionador.
Dê uma olhada no Página de exemplos para ver o Flatpickr em ação.
Você também pode definir opções segmentadas para limitar o comportamento do selecionador de data, como:
- Não permitindo determinadas datas / intervalos
- Permitindo apenas determinadas datas / intervalos
- Permitindo várias seleções de data
- “Modo de intervalo” para selecionar uma data de início e término
- Apenas um selecionador de data ou apenas o horário ou a data e o horário juntos
As opções são praticamente infinitas e todas funcionam através deste plugin JavaScript vanilla.
Os usuários de dispositivos móveis geralmente preferem o selecionador de data nativo, mas você pode substituir isso com uma configuração móvel em JavaScript. Desta forma, você terá a mesma interface trabalhando em todos os dispositivos.
E você pode até adicionar suporte ao IE9 com um polyfill o que torna este um dos plugins de selecionador de data mais bem suportados por aí.
A instalação é simples com comandos para npm, Bower e Yarn. Ou você pode baixar os arquivos de origem diretamente do GitHub se você preferir essa rota.
Tudo o que você precisa saber pode ser encontrado na página de configuração que mostra como adicionar os arquivos ao seu cabeçalho E como chamar esse selecionador de data em qualquer campo. Facilmente um dos melhores plugins de selecionador de data projetado simplesmente o suficiente para caber com qualquer projeto.
