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

Lines changed: 6 additions & 1 deletion
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

Lines changed: 100 additions & 0 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 2 additions & 0 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 5 additions & 0 deletions
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

Lines changed: 5 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 34 additions & 0 deletions
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

Lines changed: 16 additions & 0 deletions
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+

0 commit comments

Comments
 (0)