Search results

CSS customization in Angular DatePicker component

To customize DatePicker UI, you can make use of cssClass which will be added to DatePicker component as the root CSS class. With this CSS class, you can override existing styles of DatePicker.

Following is the list of classes that provides flexible way to customize the DateRangePicker component.

Class Name Description
e-date-wrapper Applied to DatePicker wrapper element.
e-datepicker Applied to input element and DatePicker popup element.
e-datepicker .e-date-wrapper Applied to input element only.
e-input-group-icon.e-date-icon Applied to popup icon button.
e-float-text Applied to floating label text element.
e-popup Applied to popup element.
e-datepicker.e-popup Applied to DatePicker popup element only.
e-header Applied to Calendar header.
e-title Applied to Calendar title.
e-icon-container Applied to Calendar previous and next icon container.
e-prev Applied to Calendar previous icon.
e-next Applied to Calendar next icon.
e-weekend Applied to Calendar weekend dates.
e-other-month Applied to Calendar other month dates.
e-day Applied to each day cell of the Calendar.
e-selected Applied to Calendar selected dates.
e-disabled Applied to Calendar disabled dates.
e-footer-container Applied to the Calendar footer container.
e-today Applied to the Calendar Today Button.
Source
Preview
app.component.ts
app.module.ts
main.ts
styles.css
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    styleUrls: ['index.css'],
    template: `<ejs-datepicker [value]='dateValue' [cssClass]='cssClass'  placeholder='Enter date' (renderDayCell)='onRenderCell($event)'></ejs-datepicker>`
})
export class AppComponent {
    public cssClass: string = 'e-custom-style';
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


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

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
/*Example styles*/

#container {
    visibility: hidden;
    max-width: 250px;
    margin: 0 auto;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

#element {
    display: block;
}

#wrapper {
    width: 250px;
    margin: 0 auto;
}

/*custom styles*/

.e-input-group.e-date-wrapper.e-custom-style:not(.e-float-icon-left)::before, /* csslint allow: adjoining-classes*/
.e-input-group.e-date-wrapper.e-custom-style:not(.e-float-icon-left)::after /* csslint allow: adjoining-classes*/
{ /* csslint allow: adjoining-classes*/
    background: blue;
}

.e-date-wrapper.e-custom-style input.e-input::selection { /* csslint allow: adjoining-classes*/
    background: blue;
}
.e-date-wrapper.e-custom-style input.e-input::-moz-selection { /* csslint allow: adjoining-classes*/
    background: blue;
}

.e-calendar .e-content td.e-disabled .e-day, .e-calendar .e-content td.e-disabled:hover .e-day, .e-calendar .e-content td.e-disabled:focus .e-day {
    color: blue;
    font-weight: bold;
}

.e-date-wrapper.e-custom-style .e-input-group-icon.e-date-icon.e-icons, /* csslint allow: adjoining-classes*/
.e-date-wrapper.e-custom-style .e-input { /* csslint allow: adjoining-classes*/
    color: blue;
}

.e-date-wrapper.e-custom-style input.e-input::selection { /* csslint allow: adjoining-classes*/
    background: blue;
}
.e-date-wrapper.e-custom-style input.e-input::-moz-selection { /* csslint allow: adjoining-classes*/
    background: blue;
}

.e-date-wrapper.e-custom-style .e-input-group-icon.e-date-icon.e-icons.e-active {  /* csslint allow: adjoining-classes*/
    color: blue;
}