Display Modes
The range has five built-in display modes that can be controlled through the display option:
top- modal that slides down from the topbottom- modal that slides up from the bottomcenter- modal that shows up in the middle with a pop animationanchored- modal that shows up anchored to an input or any dom elementinline- embeddable picker that is rendered into the markup without its own modal
Use the touchUi option to switch between touch optimized mobile rendering and pointer optimized desktop rendering. It can be dynamically switched with the help of the responsive option.
The defaults change on a theme to theme basis. The ios theme comes with bottom on mobile and anchored on desktop while the material and windows themes have center on mobile and anchored on desktop.
Want to see how to set up responsiveness? Check out the previous example →
Demo
Select the controls
<mbsc-datepicker
[controls]="['calendar ']"
display="inline"
[ touchUi] ="<mbsc-datepicker
[controls]="['calendar ']"
display="anchored"
[ touchUi] ="<mbsc-datepicker
[controls]="['calendar ']"
display="top"
[ touchUi] ="<mbsc-datepicker
[controls]="['calendar ']"
display="bottom"
[ touchUi] ="<mbsc-datepicker
[controls]="['calendar ']"
display="center"
[ touchUi] ="ComponentTemplate
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" display="inline"></mbsc-datepicker>
<mbsc-datepicker
[controls]="['calendar']"
select="range"
display="anchored"
label="Anchored"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
></mbsc-datepicker>
<mbsc-datepicker
[controls]="['calendar']"
select="range"
display="top"
label="Top"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
></mbsc-datepicker>
<mbsc-datepicker
[controls]="['calendar']"
select="range"
display="bottom"
label="Bottom"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
></mbsc-datepicker>
<mbsc-datepicker
[controls]="['calendar']"
select="range"
display="center"
label="Center"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
></mbsc-datepicker>
</mbsc-page>