Datepicker

img img img img

O componente datepicker gera um campo input com ícone de calendário. Para sua criação, foi usado a biblioteca js-datepicker1 e a biblioteca moment2.

Atributos da tag#

AtributoInput/OutputTipoObrigatório
name@InputStringNão
label@InputStringSim
message@InputStringNão
options@InputanySim
disabled@InputBooleanSim
required@InputBooleanSim
invalid@InputBooleanSim
messageInvalidSelection@InputStringSim
messageRequired@InputStringSim
language@InputStringSim
onSelectValue@OutputfunctionSim
Atribuito invalidInitialDate

Quando o atributo receber o valor false, ele será exibido corretamente. Quando receber true, ele será assumirá o estado de erro.

Atributo language

O atributo language precisa receber um valor conforme a tabela encontrada no Stackoverflow, este valor é usado para formatar corretamente a data.

Atributo options

Para preencher corretamente o atributo options, veja a documentação do js-datepicker.

Como usar#

<ugl-datepicker [label]="'Inital Date'"
[name]="'initialDate'"
[options]="onInitDatepicker()"
[message]="'Initial date must be before final date'"
[messageRequired]="'Field required'"
[invalid]="false"
[required]="true"
[messageInvalidSelection]="'This date is invalid for selection'"
[language]="'pt-BR'"
(onSelectValue)="onChangeInitialDate($event)"
#initialDate></ugl-datepicker>

Problemas na Modal#

Usando juntamente com o serviço Modal

Para que o datepicker funcione corretamente dentro de uma modal, o options precisa ser carregado somente após a chamada da modal e, dentro de um timeout.

<ugl-modal
(cancelClick)="cancel()"
(confirmClick)="confirm()"
[cancelButtonText]="'Cancel'"
[confirmButtonText]="'Confirm'">
<ugl-datepicker [label]="'Inital Date'"
[name]="'initialDate'"
[options]="onInitDatepicker()"
[message]="'Initial date must be before final date'"
[messageRequired]="'Field required'"
[invalid]="false"
[required]="true"
[messageInvalidSelection]="'This date is invalid for selection'"
[language]="'pt-BR'"
(onSelectValue)="onChangeInitialDate($event)"
#initialDate></ugl-datepicker>
</ugl-modal>