Date & Time Range Picker
Set up the range picker for date & time pair selection. Regardless if you are interested in the start/end date or the actual range, you have several possibilities of rendering a date and time range picker. The controls option supports different values:
datetime- will render a compact date scroller or dropdown with time picker for date & time range selectioncalendar- will render a calendar view for date range selection (explore date ranges)date- will render a date scroller or dropdown for date range selection (explore date ranges)time- will render a time picker for range selection (explore time ranges)timegrid- will render a time grid for range selection (explore time range selection)
Demo
One of the most common ways to represent date range selection is through a calendar with or without a time picker. Learn how to build a date-only picker.
<mbsc-datepicker
[controls]="['calendar', 'time']"
select="range"
display="inline"
[ touchUi] ="
Instead of selecting time from a list of values you can show a grid by passing 'timegrid' to the controls option.
<mbsc-datepicker
[controls]="['calendar', 'timegrid']"
select="range"
display="inline"
[ touchUi] ="
Passing datetime to the controls option renders a compact date scroller and a time scroller or dropdown with customizable start and end labels.
<mbsc-datepicker
[controls]="['datetime']"
select="range"
display="inline"
[ touchUi] ="Besides rendering it inline, you can link the range to an input that can be a Mobiscroll input or an existing field. Explore more ways to use the picker.
<mbsc-datepicker
[controls]="['datetime']"
select="range"
[ touchUi] ="
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
[controls]="['datetime']"
select="range"
[startInput]="start"
[endInput]="end"
[ 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', 'time']" select="range" display="inline"></mbsc-datepicker>
<mbsc-datepicker [controls]="['datetime']" select="range" display="inline"></mbsc-datepicker>
<mbsc-datepicker
[controls]="['datetime']"
select="range"
label="Range"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
></mbsc-datepicker>
<mbsc-datepicker [controls]="['datetime']" [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">Start</mbsc-input>
</div>
<div class="mbsc-col-6">
<mbsc-input #end placeholder="Please Select..." label="End" inputStyle="outline" labelStyle="stacked">End</mbsc-input>
</div>
</div>
</div>
</mbsc-page>