Search results

Disable, Placeholder, Read-only in Angular DateRangePicker component

27 Oct 2021 / 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
styles.css
template.html
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app/template.html'
})
export class AppComponent {
    public value: Date[] = [new Date('1/1/2020'), new Date('2/1/2023')];
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { DateRangePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        DateRangePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
#container {
    visibility: hidden;
}

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

#element {
    display: block;
    height: 350px;
}

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

.innerwrap{
    height:100px;
    }

#disable,#placeholder,#readonly{
    display:inline-block;
    margin-right:50px;
}
#disable,#placeholder,#readonly{
    float: right;
}

.innerwrap span{
    line-height:3;
    font-size:14px;
    font-weight:500;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
Copied to clipboard
<div class="innerwrap">
<span>Disabled DateRangePicker:</span> <ejs-daterangepicker id="disable" width="200px" [enabled]=false [value]='value'></ejs-daterangepicker>
</div>
<div class="innerwrap">
<span>DateRangePicker with Placeholder:</span> <ejs-daterangepicker id="placeholder" width="200px" placeholder="Enter a date range"></ejs-daterangepicker>
</div>
<div class="innerwrap">
<span>DateRangepicker in readonly mode:</span> <ejs-daterangepicker id="readonly" width="200px" readonly=true [value]='value'></ejs-daterangepicker>
</div>