Skip to main content

angular bootstrap - Select date range from Datepicker popup

app.component.ts 

import { Component } from '@angular/core';
import { 
  NgbCalendar, NgbDate, NgbDateParserFormatter,
  NgbDatepicker, NgbDateStruct 
} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    .custom-day {
      text-align: center;
      padding: 0.185rem 0.25rem;
      display: inline-block;
      height: 2rem;
      width: 2rem;
    }
    .custom-day.focused {
      background-color: Lavendar;
    }
    .custom-day.range, .custom-day:hover {
      background-color: Crimson;
      color: white;
    }
    .custom-day.faded {
      background-color: Orange;
    }
  `]
})


export class AppComponent {
  hoveredDate: NgbDate | null = null;

  fromDate: NgbDate | null;
  toDate: NgbDate | null;

  constructor(private calendar: NgbCalendar,
      public formatter: NgbDateParserFormatter) {
    this.fromDate = calendar.getPrev(calendar.getToday(), 'd', 8);
    this.toDate = calendar.getNext(calendar.getToday(), 'd', 7);
  }

  onDateSelection(date: NgbDate) {
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
    } else if (this.fromDate && !this.toDate 
        && date && date.after(this.fromDate)) {
      this.toDate = date;
    } else {
      this.toDate = null;
      this.fromDate = date;
    }
  }

  isHovered(date: NgbDate) {
    return this.fromDate && !this.toDate 
      && this.hoveredDate && date.after(this.fromDate) &&
        date.before(this.hoveredDate);
  }

  isInside(date: NgbDate) { return this.toDate 
      && date.after(this.fromDate) && date.before(this.toDate); }

  isRange(date: NgbDate) {
    return date.equals(this.fromDate) 
      || (this.toDate && date.equals(this.toDate))
      || this.isInside(date) || this.isHovered(date);
  }

  validateInput(currentValue: NgbDate | null, input: string)
    : NgbDate | null {
    const parsed = this.formatter.parse(input);
    return parsed && this.calendar.isValid(NgbDate.from(parsed))
      ? NgbDate.from(parsed) : currentValue;
  }
}
app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - Select date range from Datepicker popup
</h4>

<h5><b>Selected Date Range:</b></h5>
<h5>Form : {{ fromDate | json}}</h5>
<h5>To : {{ toDate | json}}</h5>
<br/>


<form class="row row-cols-sm-auto">
  <div class="col-12">
    <div class="dp-hidden position-absolute">
      <div class="input-group">
        
        <input name="datepicker"
               class="form-control"
               ngbDatepicker
               #datepicker="ngbDatepicker"
               [autoClose]="'outside'"
               (dateSelect)="onDateSelection($event)"
               [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
             class="form-control" placeholder="yyyy-mm-dd"
             name="dpFromDate"
             [value]="formatter.format(fromDate)"
             (input)="fromDate = validateInput(fromDate, dpFromDate.value)">
      <button (click)="datepicker.toggle()">From</button>
    </div>

  </div>
  <br/><br/>
  
  <div class="col-12">
    <div class="input-group">
      <input #dpToDate
             class="form-control" placeholder="yyyy-mm-dd"
             name="dpToDate"
             [value]="formatter.format(toDate)"
             (input)="toDate = validateInput(toDate, dpToDate.value)">
      <button (click)="datepicker.toggle()">To</button>
    </div>
  </div>

</form>
More Angular tutorials
Labels: