title: ng-bootstrap datepicker multi-select of dates ( separated dates not in range selection )
body: <p>bootstarp v 6.0.2 with angular 9 and i'm trying to do multiple select of date in datepicker like in this photo ?
  actually i have this code allowing simple select of one date ?
  did any body have an idea how can i do this ?</p>
  <p><strong>datepicker.component.ts</strong></p>
  <pre><code>  model: NgbDateStruct;
    date: NgbDate | null;
    @Output() selectedDateEventEmitter = new EventEmitter&lt;NgbDate&gt;();
    @Input() minDate;
    @Input() maxDate;
    constructor(private calendar: NgbCalendar) {
    }
  
    ngOnInit(): void {
    }
  
    onDateSelection(date: NgbDate) {
      this.date = date;
      this.selectedDateEventEmitter.emit(date);
    }
  
    isWeekend(date: NgbDateStruct) {
      const d = new Date(date.year, date.month - 1, date.day);
      return d.getDay() === 0 || d.getDay() === 6;
    }
  
    isDisabled = (date: NgbDateStruct, current: { month: number }) =&gt; {
      const d = new Date(date.year, date.month - 1, date.day);
      return this.isWeekend(date); // this is undefined
    }
  }```
  
  **datepicker.component.html**
  
      &lt;ngb-datepicker class=&quot;datepicker-custom&quot;
                  [(ngModel)]=&quot;date&quot;
                  [dayTemplate]=&quot;dayTemplate&quot;
                  [minDate]=&quot;minDate&quot;
                  [maxDate]=&quot;maxDate&quot;
                  [markDisabled]=&quot;isDisabled&quot;
                  (dateSelect)=&quot;onDateSelection($event)&quot;&gt;&lt;/ngb-datepicker&gt;
  &lt;ng-template #dayTemplate let-date let-currentMonth=&quot;currentMonth&quot; let-selected=&quot;selected&quot; let-disabled=&quot;disabled&quot; let-focused=&quot;focused&quot;&gt;
    &lt;div ngbdatepickerdayview class=&quot;custom-day btn-light&quot;[class.weekend]=&quot;isWeekend(date)&quot; [class.focused]=&quot;focused&quot; [class.bg-primary.text-white]=&quot;selected&quot; [class.hidden]=&quot;date.month !== currentMonth&quot; [class.text-muted]=&quot;disabled&quot;&gt;
      &lt;span&gt;{{ date.day }}&lt;/span&gt;
    &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>