The range component generates a Mobiscroll input that inherits the theme and overall styling rules. It can however be overridden by setting the relevant options for the component.
There are four ways to use the range picker:
- Use it on an existing input as a directive. A great example is usage with an
ion-input - Let the component generate the Mobiscroll input. Give it the extra styling and overrides through options
- Use it with two separate inputs of any type, one for
startand another forend - Embed the picker without an input. This can be the page itself or a more complex popup
Demo
Use it on an existing input, like an ion-input as a directive instead of a component.
<input mbsc-datepicker
select="range"
placeholder="Please Select...">
</input>When using the range as a component instead of a directive, the mobiscroll input will be automatically generated.
<mbsc-datepicker
select="range">
</mbsc-datepicker>
Sometimes it makes sense to use two separate inputs for start and end. You can pass a reference through the startInput and endInput options of mobiscroll or any type of input, like an ion-input.
<mbsc-datepicker
[startInput]="start"
[endInput]="end"
select="range">
</mbsc-datepicker>
<mbsc-input
#start
label="Start"
placeholder="Please Select...">
</mbsc-input>
<mbsc-input
#end
label="End"
placeholder="Please Select...">
</mbsc-input>
It can be embedded into the page or a popup as an inline picker by setting the display option to inline.
<mbsc-datepicker
select="range"
display="inline">
</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-page>
<input mbsc-datepicker [controls]="['calendar']" select="range" placeholder="Please Select..." />
<mbsc-datepicker
[controls]="['calendar']"
select="range"
label="Range"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
></mbsc-datepicker>
<mbsc-datepicker [startInput]="start" [endInput]="end" select="range"></mbsc-datepicker>
<div class="mbsc-grid mbsc-no-padding">
<div class="mbsc-row">
<div class="mbsc-col-6">
<mbsc-input #start placeholder="Please Select..." label="Start" inputStyle="outline" labelStyle="stacked"></mbsc-input>
</div>
<div class="mbsc-col-6">
<mbsc-input #end placeholder="Please Select..." label="End" inputStyle="outline" labelStyle="stacked"></mbsc-input>
</div>
</div>
</div>
<mbsc-datepicker select="range" display="inline"></mbsc-datepicker>
</mbsc-page>