Multi-Date Selection
To enable multiple selection set the selectMultiple option to true.
The selectMax option limits how many values can be selected.
To customize the header you can pass a headerText or turn selectCounter on to display a localized text with the number of dates selected.
Dynamically switching between single, multiple or range select can be done with option changes.
Demo
<mbsc-datepicker
[controls]="['calendar']"
[selectMultiple]="true"
[selectMax]="1 "
selectCounter="true"
headerText=" " >
</mbsc-datepicker>
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {}
<mbsc-datepicker [controls]="['calendar']" display="inline" [selectMultiple]="true"></mbsc-datepicker>
<mbsc-datepicker
[controls]="['calendar']"
display="inline"
[selectMultiple]="true"
[selectMax]="5"
headerText="Pick up to 5 days"
></mbsc-datepicker>
<mbsc-datepicker [controls]="['calendar']" display="inline" [selectMultiple]="true" [selectCounter]="true"></mbsc-datepicker>