Angular
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Disable, Placeholder, Read-only in Angular DateTimePicker component

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>
Previous
Next