Customization in Angular Datetimepicker component
27 Apr 20243 minutes to read
The DateTimePicker is available for UI customization that can be achieved by using available properties and events in the component.
Day and Time Cell format
The DateTimePicker is available for UI customization based on your application requirements.
It can be achieved by using renderDayCell
event that provides an option to customize each day cell on rendering.
The following example disables the weekends of every month by using renderDayCell
event.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { DateTimePickerModule } from '@syncfusion/ej2-angular-calendars'
import { Component } from "@angular/core";
import { DateTimePickerComponent } from "@syncfusion/ej2-angular-calendars";
@Component({
imports: [
DateTimePickerModule,
FormsModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-datetimepicker placeholder='Select a date and time' (renderDayCell)='onRenderCell($event)'></ejs-datetimepicker>`
})
export class AppComponent {
onRenderCell(args: any) {
/*Apply selected format to the component*/
if (args.date.getDay() == 0 || args.date.getDay() == 6) {
//sets isDisabled to true to disable the date.
args.isDisabled = true;
}
}
constructor() {}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Adding mandatory asterisk to placeholder and float label
You can add a mandatory asterisk(*)
to placeholder and float label using .e-input-group.e-control-wrapper.e-float-input .e-float-text::after class.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { DateTimePickerModule } from '@syncfusion/ej2-angular-calendars'
import { Component } from "@angular/core";
@Component({
imports: [
DateTimePickerModule,
FormsModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-datetimepicker floatLabelType="auto" placeholder="Enter date"></ejs-datetimepicker>`
})
export class AppComponent {
constructor() {}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));