Disable, Placeholder, Read-only in Angular DateTimePicker component

30 Sep 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 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.

Source

Preview

app.component.ts

app.module.ts

main.ts

template.html

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 { FormsModule } from '@angular/forms';
import { DateTimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        DateTimePickerModule,
        FormsModule
    ],
    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 DateTimePicker:</span> <ejs-datetimepicker id="disable" width="220px" [enabled]=false value="1/1/2019 1:30 PM"></ejs-datetimepicker>
</div>
<div class="innerwrap">
<span>DateTimePicker with Placeholder:</span> <ejs-datetimepicker id="placeholder" width="220px" placeholder="Enter a date and time"></ejs-datetimepicker>
</div>
<div class="innerwrap">
<span>DateTimePicker in readonly mode:</span> <ejs-datetimepicker id="readonly" width="220px" readonly=true value="1/1/2019 1:30 PM"></ejs-datetimepicker>
</div>