The picker supports multiple controls:
- Calendar view - can be used on its own or combined with a time scroller
- Date picker - can be used separately or together with a time picker as a scroller on mobile and as a dropdown on desktop
- Time picker - can be used separately or together with a date picker or calendar
- Datetime picker - can be used as a scroller on mobile and as a dropdown on desktop
Use the controls option (expecting an array) to configure the picker.
Demo
Renders a calendar view for range selection.
<mbsc-datepicker
[controls]="['calendar']"
select="range"
[ touchUi] ="Renders a date scroller for touch and a dropdown for pointer interaction.
<mbsc-datepicker
[controls]="['date']"
select="range"
[ touchUi] ="Renders a compact (one wheel) date picker with time. The scroller can be used with touch interaction on mobile and the dropdown for pointer interaction on desktop.
<mbsc-datepicker
[controls]="['datetime']"
select="range"
[ touchUi] ="Renders a combined view of a calendar and time scroller/dropdown for date and time range selection.
<mbsc-datepicker
[controls]="['calendar', 'time']"
select="range"
[ touchUi] ="
Renders a time scroller for touch and a dropdown for pointer interaction. The time format comes from the locale option that can be overridden.
<mbsc-datepicker
[controls]="['time']"
select="range"
[ touchUi] ="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-page>
<mbsc-datepicker
[controls]="['calendar']"
select="range"
label="Calendar"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
></mbsc-datepicker>
<mbsc-datepicker
[controls]="['date']"
select="range"
label="Date"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
></mbsc-datepicker>
<mbsc-datepicker
[controls]="['datetime']"
select="range"
label="Date & Time"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
></mbsc-datepicker>
<mbsc-datepicker
[controls]="['calendar', 'time']"
select="range"
label="Calendar & Time"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
></mbsc-datepicker>
<mbsc-datepicker
[controls]="['time']"
select="range"
label="Time"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
></mbsc-datepicker>
</mbsc-page>