Angular 2 – Calendário seletor de data (datepicker)

Curso básico gratuito de Angular 2 | kazale.comO objetivo dessa aula é criar um calendário seletor de data (date picker) com o Angular 2.

 

Digite seu email para se inscrever em nossa newsletter e receber atualizações sobre novos conteúdos.

Ao término dessa aula você aprenderá a criar um calendário seletor de data  (date picker) com o Angular 2.

1. Introdução

O calendário de seletor de data (date picker) é um recurso amplamente utilizado em qualquer formulário.

Existem diversas implementações já prontas no mercado, porém elas não são tão triviais de serem integradas com o frameworks modernos como o Angular 2.

Pelo fato do Angular 2 ter uma estrutura mais complexa e depender de sistemas de build como o Webpack, sua integração não é das mais simples, uma vez que existe uma certa incompatibilidade entre eles.

O Webpack por exemplo, trabalha no sistema de módulos para conseguir gerar os arquivos e dependências otimizadas para a execução da aplicação, e muitas das bibliotecas que temos hoje em dia, ainda não suportam essa estrutura, como por exemplo a famosa jQuery.

Nessa aula você aprenderá como lidar com essas incompatibilidades, e criará uma diretiva que será utilizada para adicionar o calendário ao campo de texto.

2. Pikaday

A biblioteca escolhida para essa implementação foi a Pikaday, que é bastante leve e de fácil utilização.

Para sua utilização, basicamente você deverá importar um arquivo Javascript, um arquivo CSS, e por fim inicializar o objeto Pikaday passando o ID do campo de texto a ser exibido.

Seguindo a lógica apresentada nessa aula, outras bibliotecas como o jQuery UI datepicker também poderão ser utilizadas.

3. Instalando as dependências

Essa aula não visa a utilização de um projeto específico para a implementação, e servirá de exemplo para qualquer template Angular 2.

A primeira coisa que você deverá fazer, será instalar no seu projeto via NPM, os pacotes do Pikaday e MomentJS.

O MomentJS é uma dependência do Pikaday para manipular e formatar as datas.

Para instalar ambas bibliotecas, digite os seguintes comandos NPM no terminal na raiz do projeto:

Repare que duas novas entradas serão adicionadas no arquivo ‘package.json’.

4. Importando os arquivos JS e CSS na aplicação

A importação aqui utilizada utilizará como base uma solução utilizando o Webpack, caso você esteja usando o SystemJS talvez você precisará fazer algumas adaptações.

Como o Pikaday não está no formato suportado pelo Webpack, o modo mais fácil para que a aplicação reconheça a biblioteca, será importando o arquivo diretamente de um CDN, para isso no arquivo ‘index.html’ da aplicação, dentro da tag ‘BODY’, importe o arquivo conforme exibido a seguir:

Após a importação do arquivo Javascript acima, importe o CSS do Pikaday, assim como o arquivo Javascript do MomentJS.

No arquivo ‘vendor.ts’, ou em um outro similar para importação de bibliotecas de terceiro, digite:

Pronto, com isso já temos as dependências adicionadas ao projeto.

5. Criando a diretiva do calendário

A diretiva a ser criada deverá encapsular o Pikaday, assim como sincronizar o valor do calendário com a referência do model.

Segue o código da diretiva, que também inclui uma máscara de dados no formato ‘DD/MM/YYYY’, no caso da data for digitada diretamente:

Não deixe de conferir no vídeo da aula a explicação detalhada do código acima.

Depois disso basta registrar a diretiva no módulo a ser utilizada, e chamá-la em um campo ‘input’ do HTML, conforme exemplo a seguir:

6. Conclusão

Conforme estudado nessa aula, bibliotecas externas podem gerar um pouco mais de esforço para serem integradas com o Angular 2.

Devido a isso é importante saber como criar diretivas, entender o ControlValueAccessor, HostListener, para assim conseguir integrar praticamente qualquer biblioteca em sua aplicação Angular 2.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

16 + quinze =