Disable, Placeholder, Read-only in Angular DatePicker component

24 May 2022 / 1 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.

Source

Preview

app.component.ts

app.module.ts

main.ts

template.html

styles.css

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

@Component({
    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
 */
@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);

<div class="innerwrap">
<span>Disabled DatePicker:</span> <ejs-datepicker id="disable"  [enabled]=false value="1/1/2018"></ejs-datepicker>
</div>
<div class="innerwrap">
<span>DatePicker with Placeholder:</span> <ejs-datepicker id="placeholder" placeholder="Enter a date"></ejs-datepicker>
</div>
<div class="innerwrap">
<span>Datepicker in readonly mode:</span> <ejs-datepicker id="readonly" readonly=true value="1/1/2018"></ejs-datepicker>
</div>

#container {
    visibility: hidden;
}

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

#element {
    display: inline;
}

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

.innerwrap{
height:100px;
max-width: 400px;
margin: 0 auto;
}

#disable,#placeholder,#readonly{
/* csslint ignore:start */
display:inline-block;
float:right;
/* csslint ignore:end */
}

.innerwrap span{
line-height:3;
font-size:14px;
font-weight:500;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}