For a great booking experience a good date picker is essential. The best implementations are contextual and take the intent (what people want to do) and context (where and how are they doing it) into account. Learn how to use and customize the range picker and see how you can add your flavor that matches with the overall experience of your application.
Demo
When building flight booking systems you want to make sure that you set up min & max boundaries for the selectable days. This way you ensure that people can't select dates from the past.
The range picker can be set up on one or two inputs. If you are building a fully custom experience, you can embed it into your own modal.
html<mbsc-datepicker
[controls]="['calendar']"
select="range"
[min]="min"
[max]="max">
</mbsc-datepicker>
tsmin = new Date();
max = new Date(min.getFullYear(), min.getMonth() + 6, min.getDate());
Instead of a single input you can have two, one for Outbound and another for Return.
htmlhtml<mbsc-datepicker
[controls]="['calendar']"
select="range"
[startInput]="start"
[endInput]="end"
[min]="min"
[max]="max">
</mbsc-datepicker>
<mbsc-input #start placeholder="Please Select...">Outbound</mbsc-input>
<mbsc-input #end placeholder="Please Select...">Return</mbsc-input>
tsmin = new Date();
max = new Date(min.getFullYear(), min.getMonth() + 6, min.getDate());
Besides setting min & max boundaries, days without flights should be disabled. These could be single occurrence or recurring dates, like specific weekdays. Setting inRangeInvalid: true allows ranges to contain invalids, it only makes sure that the start and end dates are on valid days. If inRangeInvalid is false, no invalid dates are allowed inside a selection (useful for hotel booking).
htmlhtml<mbsc-datepicker
[controls]="['calendar']"
select="range"
[startInput]="start"
[endInput]="end"
[invalid]="invalid"
[inRangeInvalid]="true">
</mbsc-datepicker>
<mbsc-input #start placeholder="Please Select...">Outbound</mbsc-input>
<mbsc-input #end placeholder="Please Select...">Return</mbsc-input>
tsconst now = new Date();
invalid = [
{
recurring: {
repeat: 'weekly',
weekDays: 'TU,TH'
},
},
new Date(now.getFullYear(), now.getMonth(), 25)
];
You will probably need to give people the option to select a single date for one way trips. This can be easily accomplished by dynamically setting the select option to 'date'. Toggling with a radio button between 'date'/'range' will switch between single date selection and range selection.
html<mbsc-radio-group [(ngModel)]="trip">
<mbsc-radio value="round" label="Round trip"></mbsc-radio>
<mbsc-radio value="oneway" label="One way"></mbsc-radio>
</mbsc-radio-group>>
<mbsc-datepicker
[controls]="['calendar']"
[select]="trip == 'oneway' ? 'date' : 'range'">
</mbsc-datepicker>
tstrip = 'round';
If you don't want to add another control (like a radio button or segmented) to your UI, you can solve the "one way question" with a custom button on the dialog and a little custom logic. The idea is to track if at least one value is selected and dynamically enable the button.
html<mbsc-datepicker
[controls]="['calendar']"
select="range"
#calInst
[(ngModel)]="booking"
[buttons]="buttons"
(onTempChange)="changeTripType($event)">
</mbsc-datepicker>
ts@ViewChild('calInst')
inst: Datepicker;
buttons = ['cancel', {
disabled: true,
text: 'One way only'
}, 'set'];
changeTripType() {
this.buttons = ['cancel', {
disabled: !this.inst.getTempVal()[0],
handler: () => {
const start = this.inst.getTempVal()[0];
this.booking = [start, null];
this.inst.close();
},
text: 'One way only'
}, 'set'];
};
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const now = new Date();
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
@ViewChild('calInst')
inst: any;
booking: any;
min = now;
max = new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
invalid = [
{
recurring: {
repeat: 'weekly',
weekDays: 'TU,TH',
},
},
new Date(now.getFullYear(), now.getMonth(), 25),
];
trip = 'round';
buttons: any = [
'cancel',
{
disabled: true,
text: 'One way only',
},
'set',
];
changeTripType(): void {
this.buttons = [
'cancel',
{
disabled: !this.inst.getTempVal()[0],
handler: () => {
const start = this.inst.getTempVal()[0];
this.booking = [start, null];
this.inst.close();
},
text: 'One way only',
},
'set',
];
}
}
<mbsc-page>
<div class="mbsc-grid mbsc-no-padding">
<div class="mbsc-row">
<div class="mbsc-col-12">
<mbsc-datepicker
[controls]="['calendar']"
select="range"
[min]="min"
[max]="max"
[pages]="2"
label="Pick your flight"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please select..."
></mbsc-datepicker>
</div>
</div>
<div class="mbsc-row">
<div class="mbsc-col-6">
<mbsc-datepicker
[controls]="['calendar']"
select="range"
[min]="min"
[max]="max"
[pages]="2"
[startInput]="outbound"
[endInput]="return"
></mbsc-datepicker>
<mbsc-input #outbound label="Outbound" inputStyle="outline" labelStyle="stacked" placeholder="Please Select..."></mbsc-input>
</div>
<div class="mbsc-col-6">
<mbsc-input #return label="Return" inputStyle="outline" labelStyle="stacked" placeholder="Please Select..."></mbsc-input>
</div>
</div>
<div class="mbsc-row">
<div class="mbsc-col-6">
<mbsc-datepicker
[controls]="['calendar']"
select="range"
[min]="min"
[max]="max"
[pages]="2"
[invalid]="invalid"
[startInput]="outboundInv"
[endInput]="returnInv"
></mbsc-datepicker>
<mbsc-input #outboundInv label="Outbound" inputStyle="outline" labelStyle="stacked" placeholder="Please Select..."></mbsc-input>
</div>
<div class="mbsc-col-6">
<mbsc-input #returnInv label="Return" inputStyle="outline" labelStyle="stacked" placeholder="Please Select..."></mbsc-input>
</div>
</div>
<div class="mbsc-row">
<mbsc-radio-group [(ngModel)]="trip" name="flight-booking-type" theme="material" themeVariant="light">
<mbsc-radio value="round" label="Round trip" theme="material" themeVariant="light"></mbsc-radio>
<mbsc-radio value="oneway" label="One way" theme="material" themeVariant="light"></mbsc-radio>
</mbsc-radio-group>
</div>
<div class="mbsc-row">
<div class="mbsc-col-6">
<mbsc-datepicker
[controls]="['calendar']"
[select]="trip === 'oneway' ? 'date' : 'range'"
[min]="min"
[max]="max"
[pages]="2"
[startInput]="outboundBooking"
[endInput]="returnBooking"
label="Outbound"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
></mbsc-datepicker>
<mbsc-input
#outboundBooking
label="Outbound"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
[ngStyle]="{ display: trip === 'oneway' ? 'none' : 'block' }"
></mbsc-input>
</div>
<div class="mbsc-col-6">
<mbsc-input
#returnBooking
label="Return"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please Select..."
[disabled]="trip === 'oneway'"
></mbsc-input>
</div>
</div>
<div class="mbsc-row">
<div class="mbsc-col-12">
<mbsc-datepicker
#calInst
[(ngModel)]="booking"
[controls]="['calendar']"
select="range"
[buttons]="buttons"
[min]="min"
[max]="max"
[pages]="2"
(onTempChange)="changeTripType()"
label="Pick your flight"
inputStyle="outline"
labelStyle="stacked"
placeholder="Please select..."
></mbsc-datepicker>
</div>
</div>
</div>
</mbsc-page>