Disable placeholder readonly in Angular Datepicker component

17 Nov 20222 minutes 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.

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

    selector: 'app-root',
    templateUrl: './app/template.html'
export class AppComponent {
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';

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