The selected range can be adjusted by the user or you can programmatically set the start and end.
This is especially useful and effective when using the range for filtering and you'd like to offer predefined ranges like Yesterday, Today, Last week and so on. Setting the values can be done from something as simple as a button click.
Demo
Setting today
html<mbsc-button (click)="today()">Today</mbsc-button>
<mbsc-datepicker
[controls]="['calendar']"
select="range">
</mbsc-datepicker>
tsconst now = new Date();
range: Array <Date>;
today() {
this.range = [now, now];
}
Setting yesterday
html<mbsc-button (click)="yesterday()">Yesterday</mbsc-button>
<mbsc-datepicker
[controls]="['calendar']"
select="range">
</mbsc-datepicker>
tsconst now = new Date();
const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
range: Array <Date>;
yesterday() {
this.range = [yesterday, yesterday];
}
Setting this week
html<mbsc-button (click)="week()">This week</mbsc-button>
<mbsc-datepicker
[controls]="['calendar']"
select="range">
</mbsc-datepicker>
tsconst now = new Date();
const firstday = new Date(now.setDate(now.getDate() - now.getDay()));
const lastday = new Date(now.setDate(now.getDate() - now.getDay() + 6));
range: Array <Date>;
week() {
this.range = [firstday, lastday];
}
Setting last month
html<mbsc-button (click)="month()">Last month</mbsc-button>
<mbsc-datepicker
[controls]="['calendar']"
select="range">
</mbsc-datepicker>
tsconst now = new Date();
const firstday = new Date(now.getFullYear(), now.getMonth() - 1, 1);
const lastday = new Date(now.getFullYear(), now.getMonth(), 0);
range: Array <Date>;
month() {
this.range = [firstday, lastday];
}
Clear the selection with a simple click
html<mbsc-button (click)="clear()">Clear</mbsc-button>
<mbsc-datepicker
[controls]="['calendar']"
select="range">
</mbsc-datepicker>
tsrange: Array <Date>;
clear() {
this.range = null;
}
ComponentTemplateCSS
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MbscModule, Notifications, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const now = new Date();
const curr = new Date();
const yesterday = new Date(curr.getFullYear(), curr.getMonth(), curr.getDate() - 1);
const startWeek = new Date(curr.setDate(curr.getDate() - curr.getDay()));
const endWeek = new Date(curr.setDate(curr.getDate() - curr.getDay() + 6));
const startMonth = new Date(curr.getFullYear(), curr.getMonth() - 1, 1);
const endMonth = new Date(curr.getFullYear(), curr.getMonth(), 0);
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [Notifications],
standalone: true,
imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
constructor(private notify: Notifications) {}
range: any;
today(): void {
this.range = [now, now];
this.notify.toast({
message: 'Today Selected',
});
}
yesterday(): void {
this.range = [yesterday, yesterday];
this.notify.toast({
message: 'Yesterday Selected',
});
}
thisWeek(): void {
this.range = [startWeek, endWeek];
this.notify.toast({
message: 'This Week Selected',
});
}
lastMonth(): void {
this.range = [startMonth, endMonth];
this.notify.toast({
message: 'Last Month Selected',
});
}
clear(): void {
this.range = null;
this.notify.toast({
message: 'Clear Value',
});
}
}
<mbsc-page>
<div class="md-range-filter">
<h4 class="md-header">Filter Results by</h4>
<div class="mbsc-padding">
<mbsc-button class="mbsc-button-block" (click)="today()">Today</mbsc-button>
<mbsc-button class="mbsc-button-block" (click)="yesterday()">Yesterday</mbsc-button>
<mbsc-button class="mbsc-button-block" (click)="thisWeek()">This Week</mbsc-button>
<mbsc-button class="mbsc-button-block" (click)="lastMonth()">Last Month</mbsc-button>
<mbsc-button class="mbsc-button-block" (click)="clear()">Clear</mbsc-button>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Or by a custom range</div>
<mbsc-datepicker
[(ngModel)]="range"
[controls]="['calendar']"
select="range"
display="inline"
[showRangeLabels]="false"
></mbsc-datepicker>
</div>
</div>
</mbsc-page>
.md-range-filter .md-header {
text-align: center;
padding: 1em 0.75em 0 0.75em;
margin: 0;
}