ONS Core DateTimePicker
Componente que permite selecionar ano, mês, dia, hora e minuto.
Este componente foi desenvolvido com base no Ng Date Time Picker. Os exemplos apresentados podem ser encontrados em ons-core/src/app/samples/date-time-picker-example
.
Dependências
npm install --save ng-pick-datetime@^6.0.16 moment@^2.22.0 ng-pick-datetime-moment@^1.0.7
Utilização do componente
O ONS Core DateTimePicker necessita de dois elementos no HTML: um input de texto e um owl-date-time, que serve para exibir o popup de seleção de data e hora.
Importações
É necessário importar estes módulos no componente a ser desenvolvido.
;; imports:
Diretivas
Deve-se incluir as diretivas [owlDateTimeTrigger]="id"
e [owlDateTime]="id"
em um elemento <input>
, para associá-lo ao <owl-date-time #id>
.
Data/Hora: Data/Hora selecionada: {{dateTime}} Data/Hora ainda não selecionada
Provedores
O componente suporta internacionalização utilizando a injeção de LOCALE_ID
padrão do Angular. Podem ser utilizados os locales pt-br
e en-us
.
providers:
Estilos (CSS)
É necessário importar os estilos do componente date-time-picker para o estilo principal do projeto que irá utilizar esta biblioteca.
/* Estilos para o date time picker */;
Referências
- A documentação e código da biblioteca base podem ser acessados no Github.
- Documentação adicional: https://danielykpan.github.io/date-time-picker.