Working with datepicker on ng-bootstrap

Question

I’m working with this component example: https://stackblitz.com/edit/angular-ytr3qa

I need to add three features.

The first I believe has to do with class, as in this example, if the day is outside the minimum or maximum permitted date, the day would be "deactivated" with a different colouring. My attempts to reproduce the above example were all failures.

It should look something like this:

The second feature would be to call the datapicker only when a button was clicked.

And the third feature has to do with business rule, when selecting the "dateFrom", I would like to change the setting, to allow you to select "dateTo" for a maximum of one month from the date selected in "dateFrom".

I tried to do the following:

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};
  }
}

But the following error returns to me:

ERROR Error: Cannot set Property 'maxDate' of Undefined

This can also be seen in https://stackblitz.com/edit/angular-ytr3qa

Answer 1

To set a maximum date, create a new property in your class NgbdDatepickerRange:

maxDate: NgbDateStruct;

to avoid code repetition, create a function to add a month to the start date:

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()
  };
}

add the property [maxDate]="maxDate" in the template:

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

in the condition within the function onDateSelection call the function 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();
}

See working on stackblitz.com

---

To set the disabled days css, add the property let-disabled="disabled" in the element ng-template and [class.disabled]="disabled" in the element 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>

then add in component style:

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

---

To display when you click a button, see a simple example in the documentation.