Disable placeholder readonly in Angular Daterangepicker component

27 Sep 20232 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 about the expected value in the input element.
readonly	Editing the value in the component can be prevented by setting readonly as true, but value can be included in the form post action.

app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './template.html'
})
export class AppComponent {
    public value: Date[] = [new Date('1/1/2020'), new Date('2/1/2023')];
}

app.module.ts

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 { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);