0

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?

1 Resposta 1

0

Consegui fazer funcionar trocando o tipo de evento, de (click) para (focus):

<div class="input-field">
  <input
    id="enter_at"
    type="text"
    placeholder="dd/mm/yyyy"
    (focus)="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"
    (focus)="datapickerInitialize('enter_at')"
    class="datepicker"/>
  <label for="exit_at">Saiu em:</label>
</div>

A funcionalidade passou a operar com sucesso.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .