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.

import { OnsCoreDatetimepickerModule } from 'ons-core-datetimepicker';
import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';

  imports: [
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
    OnsCoreDatetimepickerModule,
  ]

Diretivas

Deve-se incluir as diretivas [owlDateTimeTrigger]="id" e [owlDateTime]="id" em um elemento <input>, para associá-lo ao <owl-date-time #id>.

<label>
  Data/Hora:
  <input
  placeholder="Data/Hora:"
   [(ngModel)]="dateTime"
   [owlDateTimeTrigger]="dt"
   [owlDateTime]="dt">
  <owl-date-time #dt></owl-date-time>
</label>

<h4>
  <div *ngIf="dateTime; else emptyDateTime">
    Data/Hora selecionada: {{dateTime}}
  </div>
  <ng-template #emptyDateTime>Data/Hora ainda não selecionada</ng-template>
</h4>

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: [
    { provide: LOCALE_ID, useValue: 'pt-br' },
  ]

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 */
@import "~ng-pick-datetime/assets/style/picker.min.css";

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.