Seja para construir o próximo Airbnb, Wizz Air ou qualquer outro aplicativo de reserva ou logística com Vue.js, fornecer aos usuários uma maneira de enviar informações de data e hora no frontend sem complicar a UX. imperativo.
Os componentes do seletor de data fornecem essa funcionalidade muito necessária.
Os seletores de data permitem que os aplicativos enviem informações de data e hora para o back-end, garantindo que a data e a hora selecionadas atendam à finalidade do aplicativo , como proibir os usuários de selecionar uma data anterior à data atual.
Para Vue.js, há muitas bibliotecas de seleção de data no ecossistema Vue. Nesta postagem, discutiremos quais bibliotecas são as melhores e seus recursos.
Ao revisar essas bibliotecas, consideraremos o seguinte para cada uma:
Suporte para vinculação de dados bidirecional com v-model Suporte à localização Renderização do lado do servidor (SSR)/Suporte Nuxt Seleção de data em vários intervalos Suporte Vue 3 Suporte ao modo escuro
Sem mais delongas, vamos ver algumas das melhores bibliotecas de seleção de data no ecossistema Vue.
Melhores seletores de data Vue.js independentes
Nesta seção, veremos algumas das principais bibliotecas de seletores de datas independentes no ecossistema Vue.
vuejs-datepicker
vuejs-datepicker é um componente de seleção de data leve e de dependência zero para aplicativos Vue 2. É de longe uma das bibliotecas selecionadoras de data mais populares no ecossistema Vue com aproximadamente 120 mil downloads semanais no npm no momento da postagem .
Ele também suporta 50 idiomas no momento em que este post foi escrito, e os usuários podem contribuir com novos idiomas se nenhum deles estiver disponível.
Um recurso vuejs-datepicker que permanece out é a capacidade de renderizar o componente selecionador de data embutido ou não usando o prop embutido. Quando renderizado em linha, o componente seletor de data aparece sem clicar em um campo de entrada ou botão.
Isso é muito útil, pois se ajusta à demanda de design de interface do usuário para a maioria dos aplicativos da web.
Para usar a prop inline, adicione o seguinte bloco de código:
Nota: não se esqueça de importar o componente selecionador de data!
Quando a prop inline é definida como verdadeira, ele renderiza o seguinte:
No entanto, se a prop inline não for usada, o selecionador de data não renderizará com um calendário completo, deixando uma interface não tão intuitiva.
vuejs-datepicker também totalmente suporta ligação de dados bidirecional com v-model, o que torna mais fácil obter a entrada dos usuários para os desenvolvedores do Vue.
É importante notar também que este pacote funciona em Nuxt com suporte SSR, mesmo ao importar um local.
Embora o pacote tenha sido atualizado pela última vez em 2019, ele ainda é uma das principais bibliotecas de componentes selecionadores de data disponíveis no ecossistema Vue.
Recursos gerais para vuejs-datepicke r incluem o seguinte:
Suporte para vinculação de dados bidirecional com localização de modelo v e suporte de internacionalização suporte SSR/Nuxt
No entanto, vuejs-datepicker infelizmente não suporta Vue 3 ou seleção de data multirange.
vue2-datepicker
O componente vue2-datepicker tem muitos out-recursos prontos para uso, como seleção de data em vários intervalos e disabledDate e disabledTime, tornando a personalização do componente selecionador de data muito fácil. Embora tenha sido construído para o Vue 2, ele atualmente suporta o Vue 3.
Embora o selecionador de data padrão, visto abaixo, possa parecer básico, ele fornece muito mais funcionalidade.
O recurso mais exclusivo que vue2-datepicker oferece é o ValueType prop, que oferece a opção de configurar o selecionador de data para retornar um objeto Date, carimbo de data/hora ou formato.
Isso é útil porque você pode não ter para converter os dados do usuário do componente selecionador de data para atender às necessidades do seu aplicativo.
Outro recurso interessante que vale a pena discutir é o suporte do vue2-datepicker para a seleção de um intervalo de datas. Este é um recurso necessário na maioria dos aplicativos da web com um seletor de data, economizando tempo dos desenvolvedores ao escrever código personalizado.
Os usuários podem então selecionar um intervalo de datas e validá-lo para garantir que atenda às necessidades do aplicativo.
Ele também tem alguns recursos como atalhos e showTimePanel, que podem melhorar muito a experiência do usuário.
Em geral, o vue2-datepicker apresenta o seguinte:
Suporte para vinculação de dados bidirecional com Suporte de localização e internacionalização v-model Suporte Nuxt sem suporte SSR Seleção de data em vários intervalos Suporte Vue 3
Se estiver interessado, criei um GitHub Gist você pode usar para configurar este componente em um aplicativo Nuxt .
Vue DatePicker
O Vue DatePicker é um componente selecionador de data mais robusto . É de longe um dos mais fáceis de personalizar e oferece suporte ao modo RTL, suporte em linha sem entrada e adereços minDate e maxDate, que definem programaticamente a data mínima e máxima que um usuário pode selecionar.
Este componente é padronizado de acordo com as diretrizes do material design com alguns efeitos de flutuação extravagantes, transições e feedback tangível. Parece natural para usar em um aplicativo da web e fornece uma ótima experiência do usuário!
No geral, Vue DatePicker apresenta o seguinte:
Suporte para vinculação de dados bidirecional com localização de modelo v e suporte à internacionalização suporte SSR/Nuxt
No entanto, não oferece suporte à seleção de datas em vários intervalos ou Vue 3.
V-Calendar
V-Calendar , de acordo com seus documentos oficiais, é um elegante plugin de seleção de calendário e data para Vue.js. Uma coisa excelente sobre este pacote é a documentação, que torna o plug-in fácil de integrar e usar.
O V-Calendar suporta totalmente Vue 3, cores, modo escuro, e você pode realmente personalizar o formato e as datas de análise. E, com inputEvents, você pode revelar o componente selecionador de data passando o mouse ou qualquer outro evento de entrada.
Aqui está uma captura de tela de como o calendário V fica no modo escuro:
O V-calendar também possui muitos atributos que ajudam a construir experiências verdadeiramente elegantes para os usuários. Você pode usá-lo em um formulário usando uma entrada personalizada com uma mensagem de validação.
Esta é de longe a biblioteca de componentes selecionadores de data mais completa no ecossistema Vue. Se você está procurando um componente seletor de data robusto para seu aplicativo Vue com ótimo suporte da comunidade , considere este plug-in.
Com uma quantidade razoável de contribuidores no GitHub e 84 versões lançadas na postagem, com a versão recente lançada em 13 de julho de 2021 , esta é uma comunidade ativa.
No entanto, sua natureza robusta tem um preço, pois tem um Tamanho do pacote de 16,7 MB . Portanto, se você não precisa de tanto peso em seu aplicativo, escolha uma solução mais leve.
No geral, o V-calendar apresenta o seguinte:
Suporte para vinculação de dados bidirecional com Suporte de localização e internacionalização v-model Suporta Nuxt, mas sem renderização do lado do servidor (SSR) Seleção de data em vários intervalos Suporte Vue 3 Suporte ao modo escuro
CtkDatetimePicker
CtkDatetimePicker é um componente Vue.js que seleciona datas e horas, incluindo um modo de intervalo e suporte para modo escuro. Este componente também tem uma IU decente porque fornece mais visualmente do que outros selecionadores de data:
Para a captura de tela acima, eu personalize as cores com o seguinte:
Observe que o atributo com escopo deve estar presente na tag de estilo para que isso funcione!
Adicionar suporte à localização é bastante simples usando as propriedades de local que VueCtkDateTimePicker fornece. Neste exemplo de código, estamos definindo a localidade para a Rússia.
Em geral, CtkDatetimePicker apresenta o seguinte:
Suporte para ligação de dados bidirecional com V-model Localização e suporte de internacionalização Suporte SSR/Nuxt Seleção de data em vários intervalos Não há suporte para Vue 3, no entanto, é um trabalho em andamento Suporte ao modo escuro
Embora CtkDatetimePicker tenha ótimos recursos, a documentação não é sempre útil porque não cobre como personalizar o componente para atender às necessidades do seu aplicativo.
Vue Hotel Datepicker
Vue Hotel Datepicker é um selecionador de intervalo de datas responsivo para Vue.js que exibe o número de noites selecionadas com várias opções úteis, como regras de check-in e check-out personalizadas, localização suporte e muito mais.
As regras de check-in e check-out incluem os adereços maxNights, minNights e disabledDaysOfWeek.
O prop maxNights aceita um número que define programaticamente o número máximo de dias que um usuário pode reservar para um serviço. Portanto, quando um usuário seleciona até cinco dias no selecionador de data, ele desativa as outras datas no calendário:
Abaixo está a renderização do conjunto maxHeight prop a 5:
A proposta minNights também aceita um número para especificar o número mínimo de dias que um usuário pode reservar um serviço.
Na demonstração abaixo, o minNights é definido como 8, então a regra de check-in exige reserva para um mínimo de oito noites.
Observe a dica de ferramenta acima nos informando sobre o número mínimo de noites que podem ser reservado.
O objeto disabledDaysOfWeek aceita uma série de strings contendo os dias das semanas que você deseja impedir que os usuários reservem seu serviço.
Esta é o componente selecionador de data com terças e sábados desativados:
O Vue Hotel Datepicker é uma ótima opção se você está construindo um hotel ou algum tipo de aplicativo de reserva de acomodação, pois resolve a maioria dos as necessidades comuns do selecionador de data de um aplicativo da web de hotel.
O componente parece ótimo em telas de dispositivos móveis e desktop, proporcionando uma ótima experiência do usuário.
Do repositório vue-hotel-datepicker GitHub.
Uma das desvantagens desse componente, no entanto, são os documentos; eles não cobrem muito sobre como usar o pacote, mesmo para um caso básico, como obter dados de entrada dos usuários. Outra grande desvantagem é a falta de suporte para vinculação de dados bidirecional com o modelo v.
No geral, o Vue Hotel Datepicker apresenta o seguinte:
Suporte à localização e internacionalização O pacote funciona em Nuxt, mas sem suporte a renderização do lado do servidor (SSR) Seleção de data em vários intervalos
Embora não haja suporte para Vue 3, atualmente é um trabalho em andamento. Ele também não suporta vinculação de dados bidirecional com v-model.
vue-airbnb-style-datepicker
O componente vue-airbnb-style-datepicker é a implementação Vue de airbnb/reac-datas e tem uma aparência e funcionalidade semelhantes. Sua IU é limpa, moderna e a coleta de informações de data é desenvolvida com as experiências do usuário em mente.
Do repositório vue-airbnb-style-datepicker do GitHub.
Embora tenha uma bela aparência, eu não aconselharia usá-lo em um projeto realmente grande como não é mantido ativamente .
Em geral, vue-airbnb-style-datepicker apresenta o seguinte:
SSR/Nuxt support Seleção de data em vários intervalos
Ele não suporta vinculação de dados bidirecional com v-model, localização e internacionalização ou Vue 3.
Selecionadores de data da biblioteca de IU Vue.js associados
Na seção, iremos observe os componentes do selecionador de data com bibliotecas de componentes Vue UI associadas, como Vuetify, estrutura Quasar e Element UI.
Element DatePicker
O componente Elemento DatePicker vem empacotado no Biblioteca de componentes da interface do usuário em si . Isso significa que, para usar este componente, você deve instalar o Element UI.
Seus atributos facilitam a personalização e a configuração de datas e horas de maneira programática. Junto com DatePicker está o componente DateTimePicker, que permite aos usuários selecionar datas e horas em um selecionador.
Isso é muito legal porque vem com alguns casos de uso comuns, como impedir que um usuário selecione uma data de término antes de data de início do componente DatePicker.
DatePicker também suporta dados bidirecionais, data e hora com atalhos, intervalo de data e hora em uma entrada e suporte Vue 3.
Um dos as desvantagens ao usar o Element UI, em geral, é que alguns de seus componentes não são responsivos para dispositivos móveis, incluindo o componente DatePicker.
No geral, o elemento DatePicker apresenta o seguinte:
Ligação de dados bidirecional com suporte de localização e internacionalização v-model Suporte SSR/Nuxt Seleção de data em vários intervalos Suporte Vue 3
Vuetify’s v-date-picker
O v-date-picker é um dos muitos componentes que vem com Vuetify, uma biblioteca de IU do Vue com componentes de materiais lindamente feitos à mão .
O componente v-date-picker suporta internacionalização, dinâmica orientação, seleção de várias datas, eventos de data para especificar eventos usando matrizes, objetos, funções e suporte a modelo v.
Aqui está uma captura de tela do componente v-date-picker padrão:
Uma das maiores vantagens de usar o selecionador de data do Vuetify é o suporte da comunidade e uma documentação bem escrita.
No entanto, eu não recomendo instalar o Vuetify quando tudo que você precisa é um componente selecionador de data. Isso ocorre em grande parte por causa de seu tamanho de 18,2 MB e afetará o desempenho de seu aplicativo. Mas se você o estiver usando como a biblioteca de IU para todo o seu aplicativo Vue/Nuxt, vale a pena dar uma olhada no componente seletor de data.
Em geral, o v-date-picker apresenta o seguinte:
Dois-way data binding com v-model Localização e suporte de internacionalização Suporte SSR/Nuxt Seleção de data multirange Não suporte Vue 3
Seletor de data QDate do Quasar
Assim como os componentes do seletor de data Vuetify e Element UI, o
Ele segue o padrão do Material Design, portanto, há um grande foco na consistência do design para fornecer melhores experiências ao usuário. Isso significa que você só obterá todos os benefícios de usar este componente se também usar toda a biblioteca de componentes da IU.
O componente Qdate é muito semelhante à implementação do seletor de data do Vuetify; embora ambos sigam o guia de design de material, eles podem ser personalizados. Obter suporte ao modo escuro com QDate, no entanto, é bastante simples, ao contrário do Vuetify.
No Qdate, o modo escuro é simplesmente ativado com o atributo escuro, ao contrário do Vuetify, onde você deve configurar seus temas para ativar o modo escuro no componente v-date-picker.
Em geral, Qdate apresenta o a seguir:
Ligação de dados bidirecional com suporte de localização e internacionalização v-model Suporte SSR/Nuxt Seleção de data em vários intervalos Suporte Vue 3
Conclusão
Nós cobrimos muitos selecionadores de data componentes do ecossistema Vue. Ao decidir sobre um componente seletor de data para seu próximo aplicativo Vue/Nuxt, considere o tamanho do seu projeto, o formato da coleta de dados de data de seu usuário, experiência do usuário, localidades do usuário e suporte SSR.
Ao considerar esses aspectos, você pode tomar uma decisão informada.
Espero que você tenha achado este post útil. Sinta-se à vontade para deixar um comentário sobre qualquer ótimo componente selecionador de data que você usou em seu projeto Vue. Você pode encontrar minha implementação de todas as bibliotecas de seletor de data aqui no GitHub .
Você pode também me encontre no Twitter e no LinkedIn Obrigado por ler!
