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')];
}
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';
@NgModule({
imports: [
BrowserModule,
FormsModule,
DateRangePickerModule
],
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);
#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;
}
<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>