How to disable, placeholder, read-only in Angular DatePicker

14 Aug 20261 minute to read

Property	Purpose
enabled	The component can be restricted on a page, by setting enabled value as false which will disable the component completely from all user interactions including in form post action.
placeholder	Using placeholder you can display a short hint in the input element.
readonly	set readonly to stop editing the value in the input, but value can be included when form submit.

The following example demonstrates how to achieve the above described properties in the DatePicker.

app.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars'




import { Component } from '@angular/core';

@Component({
imports: [
        
        DatePickerModule
    ],


standalone: true,
    selector: 'app-root',
    templateUrl: './template.html'
})
export class AppComponent {
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));