Presets problem
Hi,
I'm testing angular js2 controls. But in daterange picker, I can't define presets dates. I get this error
If I remove presets, it works fine, and I set this config (your example)
public today: Date = new Date(new Date().toDateString());
public weekStart: Date = new Date(new Date(new Date().setDate(new Date().getDate() - (new Date().getDay() + 7) % 7)).toDateString());
public weekEnd: Date = new Date(new Date(new Date().setDate(new Date(new Date().setDate((new Date().getDate()
- (new Date().getDay() + 7) % 7))).getDate() + 6)).toDateString())
;
public monthStart: Date = new Date(new Date(new Date().setDate(1)).toDateString());
public monthEnd: Date = this.today;
public lastStart: Date = new Date(new Date(new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(1)).toDateString());
public lastEnd: Date = this.today;
public yearStart: Date = new Date(new Date(new Date().setDate(new Date().getDate() - 365)).toDateString());
public yearEnd: Date = this.today;
<div class="col-md-2">
<ejs-daterangepicker>
<e-presets> <e-preset label="This Week" [start]='weekStart' [end]='weekEnd'></e-preset>
<e-preset label="This Month" [start]='monthStart' [end]='monthEnd'>
</e-preset> <e-preset label="Last Month" [start]='lastStart' [end]='lastEnd'>
</e-preset> <e-preset label="Last Year" [start]='yearStart' [end]='yearEnd'></e-preset>
</e-presets>
</ejs-daterangepicker>
</div>
SIGN IN To post a reply.
11 Replies
Hi Satyaprasad,
Thanks for sharing enough information to us.
While checking the shared file, e-presets tag has been missed in the DateRangePicker component tag. So, we suggest you to add the below tag in the application itself.
|
<ejs-daterangepicker placeholder='Select a range'>
<e-presets>
<e-preset label="This Week" [start]='weekStart' [end]='weekEnd'></e-preset>
<e-preset label="This Month" [start]='monthStart' [end]='monthEnd'></e-preset>
<e-preset label="Last Month" [start]='lastStart' [end]='lastEnd'></e-preset>
<e-preset label="Last Year" [start]='yearStart' [end]='yearEnd'></e-preset>
</e-presets>
</ejs-daterangepicker> |
1. Also, we need to install the calendars package separately to render the DateRangePicker component without any compilation error with help of “npm install @syncfusion/ej2-angular-calendars --save”.
2. After installing the packages, we need to import the DateRangePickerModule in the app.module.ts file to integrate all functionalities in the DateRangePicker component.
|
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HighliteContentCreateComponent } from './highlite-content-create.component';
import {DateRangePickerModule} from "@syncfusion/ej2-angular-calendars";
@NgModule({
declarations: [
AppComponent,HighliteContentCreateComponent
],
imports: [
BrowserModule,
FormsModule,DateRangePickerModule
],
providers: [],
bootstrap: [AppComponent, HighliteContentCreateComponent]
})
export class AppModule { } |
3. After that, we need to import the style for the DateRangePicker component in the “styles.css” file as mentioned below.
|
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
|
For your reference, we have prepared the sample and attached it below.
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DateRangePicker_presets_139050-1876693870
Screenshot:
Regards,
Berly B.C
SIGN IN To post a reply.
