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.
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;
}