0

Estou trabalhando com esse exemplo de componente: https://stackblitz.com/edit/angular-ytr3qa

Eu preciso adicionar três recursos.

O primeiro acredito ter a ver com a classe, como nesse exemplo, se o dia estiver fora da data mínima ou máxima permitida, o dia ficaria "desativado", com uma coloração diferente. Minhas tentativas de reproduzir o exemplo acima foram todas falhas.

Deveria ficar mais ou menos assim:

Deveria ficar mais ou menos assim

O segundo recurso seria chamar o datapicker apenas quando um botão fosse clicado.

E o terceiro recurso tem a ver com regra de negócio, quando for selecionado o "dateFrom", eu gostaria de alterar a configuração, para que permitisse selecionar o "dateTo" para no máximo, daqui um mês, a partir da data selecionada no "dateFrom".

Eu tentei fazer o seguinte:

onDateSelection(date: NgbDateStruct, config: NgbDatepickerConfig) {
  if (!this.fromDate && !this.toDate) {
    this.fromDate = date;
    config.maxDate = {year: date.year, month: date.month + 1, day: date.day};
  } else if (this.fromDate && !this.toDate && after(date, this.fromDate)) {
    this.toDate = date;
  } else {
    this.toDate = null;
    this.fromDate = date;
    config.maxDate = {year: date.year, month: date.month + 1, day: date.day};
  }
}

Porém me retorna o seguinte erro:

ERROR Error: Cannot set property 'maxDate' of undefined

Isso também pode ser visto em https://stackblitz.com/edit/angular-ytr3qa

1 Resposta 1

1

Para definir uma data máxima, crie uma nova propriedade em sua classe NgbdDatepickerRange:

maxDate: NgbDateStruct;

para evitar repetição de código, crie uma função para adicionar um mês na data inicial:

addMonth() {
  let maxDate = new Date(this.fromDate.year, this.fromDate.month, this.fromDate.day);
  // Define o valor da propriedade `this.maxDate`
  this.maxDate = {
    year: maxDate.getFullYear(),
    month: (maxDate.getMonth()+1),
    day: maxDate.getDate()
  };
}

adicione a propriedade [maxDate]="maxDate" no template:

<ngb-datepicker #dp (select)="onDateSelection($event)" [dayTemplate]="t" [maxDate]="maxDate">

na condição dentro da função onDateSelection chame a função addMonth():

if (!this.fromDate && !this.toDate) {
  this.fromDate = date;
  this.addMonth();
} else if (this.fromDate && !this.toDate && after(date, this.fromDate)) {
  this.toDate = date;
} else {
  this.fromDate = date;
  this.toDate = null;
  this.addMonth();
}

Veja funcionando em stackblitz.com


Para definir o css dos dias desabilitados, adicione a propriedade let-disabled="disabled" no elemento ng-template e [class.disabled]="disabled" no elemento span

<ng-template #t let-date="date" let-focused="focused" let-disabled="disabled">
  <span class="custom-day"
    [class.disabled]="disabled"
    [class.focused]="focused"
    [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
    [class.faded]="isHovered(date) || isInside(date)"
    (mouseenter)="hoveredDate = date"
    (mouseleave)="hoveredDate = null">
      {{ date.day }}
  </span>
</ng-template>

depois adicione no estilo do componente:

.custom-day.disabled {
  background-color: #fff;
  color: #c1c1c1;
}
.custom-day.disabled:hover {
  background-color: #fff;
  color: #c1c1c1;
}

Para exibir quando clicar em um botão, veja um exemplo simples na documentação.

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 .