Search results

Customization in Angular DateRangePicker component

21 Oct 2021 / 3 minutes to read

DateRangePicker makes available for the UI customization which can be achieved with properties, events that are available with this component.

Day cell format

renderDayCell is a event which provides the option to customize each day cell while rendering itself. The following example disables the weekends of every month using renderDayCell event.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<ejs-daterangepicker (renderDayCell)='disableDate($event)' placeholder='Select a range'></ejs-daterangepicker>`
})
export class AppComponent {
    constructor() {
    }
    disableDate(args): void {
         if (args.date.getDay() == 0 || args.date.getDay() == 6) {
        //sets isDisabled to true to disable the date.
        args.isDisabled = true;
    }
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { DateRangePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        DateRangePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

First day of week

Start day in a week will differ based on culture and it can be customized based on application needs. For this customization, you can make use of firstDayOfWeek property. By default, first day of week in en-US is Sunday.

In below example, first day of the week in the pop-up calendar is customized to Monday with help of the firstDayOfWeek property.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    styleUrls: ['index.css'],
    template: `<ejs-daterangepicker [firstDayOfWeek]='startDay'  placeholder='Select a range'></ejs-daterangepicker>`
})
export class AppComponent {
    public startDay:Number = 1;
    constructor() {
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { DateRangePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        DateRangePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Preset Ranges

DateRangePicker has an option to set the pre-defined ranges with label using presets property. With help of this, we can set the frequently used ranges as preset ranges for quick selection in a DateRangePicker popup. Here in following sample, you can choose the mostly using options from pre-defined ranges easily.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    styleUrls: ['index.css'],
    template: `<ejs-daterangepicker placeholder='Select a range'>
            <e-presets>
                <e-preset label="This Week" [start]='weekStart' [end]='weekEnd'></e-preset>
                <e-preset label="This Month" [start]='monthStart' [end]='monthEnd'></e-preset>
                <e-preset label="Last Month" [start]='lastStart' [end]='lastEnd'></e-preset>
                <e-preset label="Last Year" [start]='yearStart' [end]='yearEnd'></e-preset>
            </e-presets>
        </ejs-daterangepicker>`
})
export class AppComponent {
public today: Date = new Date(new Date().toDateString());
    public weekStart: Date = new Date(new Date(new Date().setDate(new Date().getDate() - (new Date().getDay() + 7) % 7)).toDateString());
    public weekEnd: Date = new Date(new Date(new Date().setDate(new Date(new Date().setDate((new Date().getDate()
        - (new Date().getDay() + 7) % 7))).getDate() + 6)).toDateString())
        ;
    public monthStart: Date = new Date(new Date(new Date().setDate(1)).toDateString());
    public monthEnd: Date = this.today;
    public lastStart: Date = new Date(new Date(new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(1)).toDateString());
    public lastEnd: Date = this.today;
    public yearStart: Date = new Date(new Date(new Date().setDate(new Date().getDate() - 365)).toDateString());
    public yearEnd: Date = this.today;

    constructor() {
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { DateRangePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        DateRangePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

See Also