Após inicializar um datepicker
do Materialize CSS com sucesso, percebi que precisaria de dois datepickers
no mesmo formulário. O problema é que só consigo inicializar um datepicker
:
HTML:
<form [formGroup]="dataForm" (ngSubmit)="ngSubmit()">
<div class="input-field">
<input
id="enter_at"
type="text"
placeholder="dd/mm/yyyy"
class="datepicker"/>
<label for="enter_at">Entrou em:</label>
</div>
<div class="input-field">
<input
id="exit_at"
type="text"
placeholder="dd/mm/yyyy"
class="datepicker"/>
<label for="exit_at">Saiu em:</label>
</div>
<div>
<button class="btn-large blue pf-block" type="submit">Salvar</button>
</div>
</form>
Inicialização do componente no Angular:
var elems = document.querySelectorAll('.datepicker');
var instances = M.Datepicker.init(elems, {
format: "dd/mm/yyyy",
onSelect: function(dateText) {
this.dataForm.controls['enter_at'].setValue(dateText);
},
});
Tentei inicializar eles apenas ao clicar, mas não deu certo. O sistema simplesmente ignora a propriedade:
HTML modificado:
<div class="input-field">
<input
id="enter_at"
type="text"
placeholder="dd/mm/yyyy"
(click)="datapickerInitialize('enter_at')"
class="datepicker"/>
<label for="enter_at">Entrou em:</label>
</div>
<div class="input-field">
<input
id="exit_at"
type="text"
placeholder="dd/mm/yyyy"
(click)="datapickerInitialize('enter_at')"
class="datepicker"/>
<label for="exit_at">Saiu em:</label>
</div>
Função datapickerInitialize
:
datapickerInitialize(id: string){
var elems = document.getElementById(id);
var instances = M.Datepicker.init(elems, {
format: "dd/mm/yyyy",
onSelect: (dateText) => {
this.dataForm.controls[id].setValue(dateText);
},
});
}
Não estou fazendo uso do jQuery no projeto por causa de alguns conflitos de manipulação do DOM com alguns componentes.
Como fazer essa inicialização no JavaScript ou TypeScript puro?