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

Disable, Placeholder, Read-only in Angular DatePicker 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 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;
}
Previous
Next