javascriptangularngx-bootstrap

Set the maximum date to today in ngx-bootstrap Datepicker


I am very beginner in Angular.

I have problem with my ....

I have this code:


  onDateSelection(date: NgbDate, datepicker: any) {
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
    } else if (this.fromDate && !this.toDate && date) {
      this.toDate = date;
      datepicker.close();
    } else {
      this.toDate = null;
      this.fromDate = date;
    }
  }


<div class="col-9 col-md-8">
      <div class="dp-hidden position-absolute kalendarz">
        <div class="input-group">
          <input
            name="datepicker"
            class="form-control"
            ngbDatepicker
            #datepicker="ngbDatepicker"
            [autoClose]="'outside'"
            (dateSelect)="onDateSelection($event, datepicker)"
            [displayMonths]="2"
            [dayTemplate]="t"
            outsideDays="hidden"
            [startDate]="fromDate!"
            tabindex="-1"
          />
          <ng-template #t let-date let-focused="focused">
                    <span
            class="custom-day"
            [class.focused]="focused"
            [class.range]="isRange(date)"
            [class.faded]="isHovered(date) || isInside(date)"
            (mouseenter)="hoveredDate = date"
            (mouseleave)="hoveredDate = null"
          >
                        {{ date.day }}
                    </span>
          </ng-template>
        </div>
      </div>
      <div class="input-group">
        <input
          #dpFromDate
          readonly
          class="form-control dpFromDate"
          placeholder="yyyy-mm-dd"
          name="dpFromDate"
          id="dpFromDate"
          [value]="formatter.format(fromDate) + ' - ' + formatter.format(toDate)"
          (input)="fromDate = validateInput(fromDate, dpFromDate.value)"
        />
        <button class="btn btn-outline-secondary bi bi-calendar3" (click)="datepicker.toggle()" type="button"></button>
      </div>
    </div>

It's work fine.

Currently it works so that I can select a date range (date from and date to). The FROM date and the TO date can be the same day. This is ok.

I would like my FROM date to be TODAY or any earlier date. So if today is 06/06/2023 - then the FROM date would be 06/06/2023, 01/06/2023, 01/01/2022 - but it cannot be 07/06/2023.

We can anyone how to do this?


Solution

  • import { NgbDate } from '@ng-bootstrap/ng-bootstrap';
    
    // ...
    
    onDateSelection(date: NgbDate, datepicker: any) {
      const selectedDate = new Date(date.year, date.month - 1, date.day);
    
      if (selectedDate.getTime() <= Date.now()) {
        if (!this.fromDate && !this.toDate) {
          this.fromDate = date;
        } else if (this.fromDate && !this.toDate && date) {
          this.toDate = date;
          datepicker.close();
        } else {
          this.toDate = null;
          this.fromDate = date;
        }
      }
    }
    

    This way you ensure that the FROM date is always set to today's date or an earlier date