Skip to content

Commit ee4a0fa

Browse files
LipataIvayloGwnvkosimeonoff
authored
feat(igx-date-range-picker): add samples #1574, #1847 #1944
Co-authored-by: IvayloG <[email protected]> Co-authored-by: wnvko <[email protected]> Co-authored-by: Simeon Simeonoff <[email protected]>
1 parent 689868f commit ee4a0fa

26 files changed

+466
-13
lines changed

‎.vscode/settings.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,10 @@
22
"editor.tabSize": 4,
33
"editor.insertSpaces": true,
44
"editor.detectIndentation": false,
5-
"jscs.enable": false
5+
"jscs.enable": false,
6+
"cSpell.words": [
7+
"angular",
8+
"igniteui",
9+
"igniteui-angular"
10+
]
611
}

‎live-editing/configs/DateRangePickerConfigGenerator.ts

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { IgxDateRangePickerModule, IgxIconModule, IgxInputGroupModule, IgxSelectModule } from "igniteui-angular";
2+
import { BasicDateRangePickerComponent
3+
} from "../../src/app/scheduling/daterangepicker/daterangepicker-basic/daterangepicker-basic";
4+
import { FlightBookingComponent, PipeWithoutTownFrom
5+
} from "../../src/app/scheduling/daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking";
6+
import { DateRangePickerModeComponent
7+
} from "../../src/app/scheduling/daterangepicker/daterangepicker-mode/daterangepicker-mode";
8+
import { DateRangePickerStartEndComponent
9+
} from "../../src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end";
10+
import { StyledDateRangePickerComponent
11+
} from "../../src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling";
12+
import { DateRangePickerValidationComponent
13+
} from "../../src/app/scheduling/daterangepicker/daterangepicker-validation/daterangepicker-validation";
14+
import { AppModuleConfig } from "./core/AppModuleConfig";
15+
import { Config } from "./core/Config";
16+
import { IConfigGenerator } from "./core/IConfigGenerator";
17+
18+
export class DateRangePickerConfigGenerator implements IConfigGenerator {
19+
public generateConfigs(): Config[] {
20+
const configs = new Array<Config>();
21+
22+
configs.push(
23+
new Config({
24+
component: BasicDateRangePickerComponent,
25+
appModuleConfig: new AppModuleConfig({
26+
imports: [IgxDateRangePickerModule, IgxInputGroupModule, BasicDateRangePickerComponent],
27+
ngDeclarations: [BasicDateRangePickerComponent],
28+
ngImports: [IgxDateRangePickerModule, IgxInputGroupModule]
29+
}),
30+
shortenComponentPathBy: "/scheduling/daterangepicker/"
31+
})
32+
);
33+
34+
configs.push(
35+
new Config({
36+
component: DateRangePickerModeComponent,
37+
appModuleConfig: new AppModuleConfig({
38+
imports: [IgxDateRangePickerModule, DateRangePickerModeComponent],
39+
ngDeclarations: [DateRangePickerModeComponent],
40+
ngImports: [IgxDateRangePickerModule]
41+
}),
42+
shortenComponentPathBy: "/scheduling/daterangepicker/"
43+
})
44+
);
45+
46+
configs.push(
47+
new Config({
48+
component: DateRangePickerStartEndComponent,
49+
appModuleConfig: new AppModuleConfig({
50+
imports: [IgxDateRangePickerModule, DateRangePickerStartEndComponent,
51+
IgxInputGroupModule, IgxIconModule ],
52+
ngDeclarations: [DateRangePickerStartEndComponent],
53+
ngImports: [IgxDateRangePickerModule, IgxInputGroupModule, IgxIconModule]
54+
}),
55+
shortenComponentPathBy: "/scheduling/daterangepicker/"
56+
})
57+
);
58+
59+
configs.push(
60+
new Config({
61+
component: DateRangePickerValidationComponent,
62+
appModuleConfig: new AppModuleConfig({
63+
imports: [IgxDateRangePickerModule, DateRangePickerValidationComponent,
64+
IgxInputGroupModule, IgxIconModule],
65+
ngDeclarations: [DateRangePickerValidationComponent],
66+
ngImports: [IgxDateRangePickerModule, IgxInputGroupModule, IgxIconModule]
67+
}),
68+
shortenComponentPathBy: "/scheduling/daterangepicker/"
69+
})
70+
);
71+
72+
configs.push(
73+
new Config({
74+
component: StyledDateRangePickerComponent,
75+
appModuleConfig: new AppModuleConfig({
76+
imports: [IgxDateRangePickerModule, StyledDateRangePickerComponent,
77+
IgxInputGroupModule, IgxIconModule],
78+
ngDeclarations: [StyledDateRangePickerComponent],
79+
ngImports: [IgxDateRangePickerModule, IgxInputGroupModule, IgxIconModule]
80+
}),
81+
shortenComponentPathBy: "/scheduling/daterangepicker/"
82+
})
83+
);
84+
85+
configs.push(
86+
new Config({
87+
component: FlightBookingComponent,
88+
appModuleConfig: new AppModuleConfig({
89+
imports: [IgxDateRangePickerModule, IgxSelectModule,
90+
IgxInputGroupModule, IgxIconModule, FlightBookingComponent, PipeWithoutTownFrom],
91+
ngDeclarations: [FlightBookingComponent, PipeWithoutTownFrom],
92+
ngImports: [IgxDateRangePickerModule, IgxSelectModule, IgxInputGroupModule, IgxIconModule]
93+
}),
94+
shortenComponentPathBy: "/scheduling/daterangepicker/"
95+
})
96+
);
97+
98+
return configs;
99+
}
100+
}

‎live-editing/configs/DateTimeEditorConfigGenerator.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export class DateTimeEditorConfigGenerator implements IConfigGenerator {
2020
ngDeclarations: [DateTimeBasicComponent],
2121
ngImports: [IgxInputGroupModule, IgxDateTimeEditorModule, IgxTextSelectionModule]
2222
}),
23-
shortenComponentPathBy: "/scheduling/datetimeeditor"
23+
shortenComponentPathBy: "/scheduling/datetimeeditor/"
2424
})
2525
);
2626

‎live-editing/generators/ConfigGenerators.ts

+2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { ChipConfigGenerator } from "../configs/ChipConfigGenerator";
1313
import { CircularProgressbarConfigGenerator } from "../configs/CircularProgressbarConfigGenerator";
1414
import { ComboConfigGenerator } from "../configs/ComboConfigGenerator";
1515
import { DatePickerConfigGenerator } from "../configs/DatePickerConfigGenerator";
16+
import { DateRangePickerConfigGenerator } from "../configs/DateRangePickerConfigGenerator";
1617
import { DateTimeEditorConfigGenerator } from "../configs/DateTimeEditorConfigGenerator";
1718
import { DialogConfigGenerator } from "../configs/DialogConfigGenerator";
1819
import { DividerConfigGenerator } from "../configs/DividerConfigGenerator";
@@ -84,6 +85,7 @@ export const CONFIG_GENERATORS =
8485
CheckboxConfigGenerator,
8586
ComboConfigGenerator,
8687
DatePickerConfigGenerator,
88+
DateRangePickerConfigGenerator,
8789
DateTimeEditorConfigGenerator,
8890
DropDownConfigGenerator,
8991
InputGroupConfigGenerator,

‎src/app/scheduling/datepicker/datepicker-sample-1/datepicker-sample-1.component.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.date-picker-wrapper {
1+
.datе-picker-wrapper {
22
padding: 1rem;
33
max-width: 600px;
44
}

‎src/app/scheduling/daterangepicker/daterangepicker-basic/daterangepicker-basic.html

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
2+
<igx-date-range-picker [(ngModel)]="range">
3+
<label igxLabel>Flight dates</label>
4+
</igx-date-range-picker>
5+

‎src/app/scheduling/daterangepicker/daterangepicker-basic/daterangepicker-basic.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
:host {
2+
display: block;
3+
padding: 1rem;
4+
max-width: 600px;
5+
}

‎src/app/scheduling/daterangepicker/daterangepicker-basic/daterangepicker-basic.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component } from "@angular/core";
2+
import { DateRange } from "igniteui-angular";
3+
4+
@Component({
5+
selector: "basic-rangedatepicker",
6+
styleUrls: ["./daterangepicker-basic.scss"],
7+
templateUrl: "./daterangepicker-basic.html"
8+
})
9+
export class BasicDateRangePickerComponent {
10+
public range: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };
11+
}

‎src/app/scheduling/daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
2+
<form>
3+
<div class="towns">
4+
<igx-select name="townFrom" [(ngModel)]="townFrom" class="town-select">
5+
<igx-prefix>
6+
<igx-icon>flight_takeoff</igx-icon>
7+
</igx-prefix>
8+
<igx-select-item *ngFor="let town of towns" [value]="town">
9+
{{town}}
10+
</igx-select-item>
11+
</igx-select>
12+
<igx-select name="townTo" [(ngModel)]="townTo" class="town-select">
13+
<igx-prefix>
14+
<igx-icon>flight_land</igx-icon>
15+
</igx-prefix>
16+
<igx-select-item *ngFor="let town of towns | withoutTownFrom:townFrom" [value]="town">
17+
{{town}}
18+
</igx-select-item>
19+
</igx-select>
20+
</div>
21+
22+
<igx-date-range-picker name="datesRange" #dateRangePicker="ngModel" required
23+
[(ngModel)]="range"
24+
[minValue]="minDate"
25+
[maxValue]="maxDate"
26+
[placeholder]="'Depart on - Return on'"
27+
>
28+
<label igxLabel>Flight dates</label>
29+
<igx-hint *ngIf="dateRangePicker.invalid && (dateRangePicker.dirty || dateRangePicker.touched)">
30+
Please choose start and end date!
31+
</igx-hint>
32+
</igx-date-range-picker>
33+
</form>
34+

‎src/app/scheduling/daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
:host {
2+
display: block;
3+
padding: 1rem;
4+
max-width: 700px;
5+
}
6+
7+
.towns {
8+
display: flex;
9+
margin-top: 16px;
10+
justify-content: space-between;
11+
}
12+
.town-select {
13+
display: inline-block;
14+
width: 49%;
15+
}
16+

‎src/app/scheduling/daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking.ts

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Component, Pipe, PipeTransform } from "@angular/core";
2+
import { DateRange } from "igniteui-angular";
3+
4+
@Component({
5+
selector: "flight-booking",
6+
styleUrls: ["./daterangepicker-flight-booking.scss"],
7+
templateUrl: "./daterangepicker-flight-booking.html"
8+
})
9+
export class FlightBookingComponent {
10+
public towns: string[] = [
11+
"New York",
12+
"Washington, D.C.",
13+
"London",
14+
"Berlin",
15+
"Sofia",
16+
"Rome",
17+
"Kiev",
18+
"Copenhagen",
19+
"Paris",
20+
"Barcelona",
21+
"Vienna",
22+
"Athens",
23+
"Dublin",
24+
"Yerevan",
25+
"Oslo",
26+
"Helsinki",
27+
"Stockholm",
28+
"Prague",
29+
"Istanbul"
30+
];
31+
public townFrom = "Barcelona";
32+
public townTo = "New York";
33+
public minDate: Date;
34+
public maxDate: Date;
35+
public range: DateRange;
36+
37+
constructor() {
38+
const today = new Date();
39+
40+
this.minDate = new Date();
41+
this.minDate.setDate(today.getDate() + 10);
42+
43+
this.maxDate = new Date();
44+
this.maxDate.setDate(today.getDate() + 10);
45+
this.maxDate.setMonth(today.getMonth() + 1);
46+
}
47+
}
48+
49+
@Pipe({ name: "withoutTownFrom" })
50+
export class PipeWithoutTownFrom implements PipeTransform {
51+
public transform(collection: any[], townFrom: string) {
52+
return collection.filter((item) => item !== townFrom);
53+
}
54+
}

‎src/app/scheduling/daterangepicker/daterangepicker-mode/daterangepicker-mode.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<igx-date-range-picker value="range" [mode]="'dropdown'"></igx-date-range-picker>

‎src/app/scheduling/daterangepicker/daterangepicker-mode/daterangepicker-mode.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
:host {
2+
display: block;
3+
padding: 1rem;
4+
max-width: 600px;
5+
}

‎src/app/scheduling/daterangepicker/daterangepicker-mode/daterangepicker-mode.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component } from "@angular/core";
2+
import { DateRange } from "igniteui-angular";
3+
4+
@Component({
5+
selector: "mode-rangedatepicker",
6+
styleUrls: ["./daterangepicker-mode.scss"],
7+
templateUrl: "./daterangepicker-mode.html"
8+
})
9+
export class DateRangePickerModeComponent {
10+
public range: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };
11+
}

‎src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<igx-date-range-picker [(ngModel)]="range">
2+
<igx-date-range-start>
3+
<input igxInput igxDateTimeEditor type="text">
4+
<igx-picker-toggle igxPrefix>
5+
<igx-icon>calendar_today</igx-icon>
6+
</igx-picker-toggle>
7+
</igx-date-range-start>
8+
<igx-date-range-end>
9+
<input igxInput igxDateTimeEditor type="text">
10+
</igx-date-range-end>
11+
</igx-date-range-picker>

‎src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end.scss

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:host {
2+
display: block;
3+
padding: 1rem;
4+
}

‎src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component } from "@angular/core";
2+
import { DateRange } from "igniteui-angular";
3+
4+
@Component({
5+
selector: "rangedatepicker-start-end",
6+
styleUrls: ["./daterangepicker-start-end.scss"],
7+
templateUrl: "./daterangepicker-start-end.html"
8+
})
9+
export class DateRangePickerStartEndComponent {
10+
public range: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };
11+
}

‎src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<igx-date-range-picker [(ngModel)]="range" [overlaySettings]="{ outlet: element }">
2+
<igx-date-range-start>
3+
<input igxInput igxDateTimeEditor type="text">
4+
<igx-picker-toggle igxPrefix>
5+
<igx-icon>calendar_today</igx-icon>
6+
</igx-picker-toggle>
7+
</igx-date-range-start>
8+
<igx-date-range-end>
9+
<input igxInput igxDateTimeEditor type="text">
10+
</igx-date-range-end>
11+
</igx-date-range-picker>

‎src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.scss

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// in component.scss
2+
@import '~igniteui-angular/lib/core/styles/themes/index';
3+
4+
// common
5+
$purple: #9E379F;
6+
$blue: #61AEDB;
7+
8+
$custom-palette: igx-palette($primary: $blue, $secondary: $purple);
9+
10+
$today-text: igx-color($custom-palette, "primary", 500);
11+
$text-color: igx-color($custom-palette, "secondary", 200);
12+
$color-focused: igx-color($custom-palette, "secondary", 500);
13+
14+
15+
// DATE-RANGE
16+
$custom-date-range-theme: igx-date-range-picker-theme(
17+
$label-color: $color-focused
18+
);
19+
20+
// INPUT GROUP
21+
$custom-input-group-theme: igx-input-group-theme(
22+
$palette: $custom-palette,
23+
$filled-text-color: $text-color,
24+
$idle-text-color: $text-color,
25+
$focused-text-color: $color-focused,
26+
$hover-bottom-line-color: $color-focused,
27+
$idle-bottom-line-color: $purple
28+
);
29+
30+
// CALENDAR styling specific overlay component requires outlet -> [overlaySettings]="{ outlet: element }"
31+
$custom-calendar-theme: igx-calendar-theme(
32+
$palette: $custom-palette,
33+
$date-current-text-color: $today-text,
34+
$border-radius: 0.5,
35+
$date-border-radius: 0.5
36+
);
37+
38+
:host {
39+
display: block;
40+
padding: 1rem;
41+
42+
::ng-deep {
43+
@include igx-date-range-picker($custom-date-range-theme);
44+
@include igx-input-group($custom-input-group-theme);
45+
@include igx-calendar($custom-calendar-theme);
46+
}
47+
}

‎src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Component, ElementRef } from "@angular/core";
2+
import { DateRange } from "igniteui-angular";
3+
4+
@Component({
5+
selector: "styled-rangedatepicker",
6+
styleUrls: ["./daterangepicker-styling.scss"],
7+
templateUrl: "./daterangepicker-styling.html"
8+
})
9+
export class StyledDateRangePickerComponent {
10+
public range: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };
11+
12+
constructor(public element: ElementRef) { }
13+
}

0 commit comments

Comments
 (0)