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]>

.vscode/settings.json

@@ -2,5 +2,10 @@
 	"editor.tabSize": 4,
 	"editor.insertSpaces": true,
     "editor.detectIndentation": false,
-    "jscs.enable": false
+    "jscs.enable": false,
+    "cSpell.words": [
+        "angular",
+        "igniteui",
+        "igniteui-angular"
+    ]
 }

live-editing/configs/DateRangePickerConfigGenerator.ts

@@ -0,0 +1,100 @@
+import { IgxDateRangePickerModule, IgxIconModule, IgxInputGroupModule, IgxSelectModule } from "igniteui-angular";
+import { BasicDateRangePickerComponent
+} from "../../src/app/scheduling/daterangepicker/daterangepicker-basic/daterangepicker-basic";
+import { FlightBookingComponent, PipeWithoutTownFrom
+} from "../../src/app/scheduling/daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking";
+import { DateRangePickerModeComponent
+} from "../../src/app/scheduling/daterangepicker/daterangepicker-mode/daterangepicker-mode";
+import { DateRangePickerStartEndComponent
+} from "../../src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end";
+import { StyledDateRangePickerComponent
+} from "../../src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling";
+import { DateRangePickerValidationComponent
+} from "../../src/app/scheduling/daterangepicker/daterangepicker-validation/daterangepicker-validation";
+import { AppModuleConfig } from "./core/AppModuleConfig";
+import { Config } from "./core/Config";
+import { IConfigGenerator } from "./core/IConfigGenerator";
+
+export class DateRangePickerConfigGenerator implements IConfigGenerator {
+    public generateConfigs(): Config[] {
+        const configs = new Array<Config>();
+
+        configs.push(
+            new Config({
+                component: BasicDateRangePickerComponent,
+                appModuleConfig: new AppModuleConfig({
+                    imports: [IgxDateRangePickerModule, IgxInputGroupModule, BasicDateRangePickerComponent],
+                    ngDeclarations: [BasicDateRangePickerComponent],
+                    ngImports: [IgxDateRangePickerModule, IgxInputGroupModule]
+                }),
+                shortenComponentPathBy: "/scheduling/daterangepicker/"
+            })
+        );
+
+        configs.push(
+            new Config({
+                component: DateRangePickerModeComponent,
+                appModuleConfig: new AppModuleConfig({
+                    imports: [IgxDateRangePickerModule, DateRangePickerModeComponent],
+                    ngDeclarations: [DateRangePickerModeComponent],
+                    ngImports: [IgxDateRangePickerModule]
+                }),
+                shortenComponentPathBy: "/scheduling/daterangepicker/"
+            })
+        );
+
+        configs.push(
+            new Config({
+                component: DateRangePickerStartEndComponent,
+                appModuleConfig: new AppModuleConfig({
+                    imports: [IgxDateRangePickerModule, DateRangePickerStartEndComponent,
+                        IgxInputGroupModule, IgxIconModule ],
+                    ngDeclarations: [DateRangePickerStartEndComponent],
+                    ngImports: [IgxDateRangePickerModule, IgxInputGroupModule, IgxIconModule]
+                }),
+                shortenComponentPathBy: "/scheduling/daterangepicker/"
+            })
+        );
+
+        configs.push(
+            new Config({
+                component: DateRangePickerValidationComponent,
+                appModuleConfig: new AppModuleConfig({
+                    imports: [IgxDateRangePickerModule, DateRangePickerValidationComponent,
+                        IgxInputGroupModule, IgxIconModule],
+                    ngDeclarations: [DateRangePickerValidationComponent],
+                    ngImports: [IgxDateRangePickerModule, IgxInputGroupModule, IgxIconModule]
+                }),
+                shortenComponentPathBy: "/scheduling/daterangepicker/"
+            })
+        );
+
+        configs.push(
+            new Config({
+                component: StyledDateRangePickerComponent,
+                appModuleConfig: new AppModuleConfig({
+                    imports: [IgxDateRangePickerModule, StyledDateRangePickerComponent,
+                        IgxInputGroupModule, IgxIconModule],
+                    ngDeclarations: [StyledDateRangePickerComponent],
+                    ngImports: [IgxDateRangePickerModule, IgxInputGroupModule, IgxIconModule]
+                }),
+                shortenComponentPathBy: "/scheduling/daterangepicker/"
+            })
+        );
+
+        configs.push(
+            new Config({
+                component: FlightBookingComponent,
+                appModuleConfig: new AppModuleConfig({
+                    imports: [IgxDateRangePickerModule, IgxSelectModule,
+                        IgxInputGroupModule, IgxIconModule, FlightBookingComponent, PipeWithoutTownFrom],
+                    ngDeclarations: [FlightBookingComponent, PipeWithoutTownFrom],
+                    ngImports: [IgxDateRangePickerModule, IgxSelectModule, IgxInputGroupModule, IgxIconModule]
+                }),
+                shortenComponentPathBy: "/scheduling/daterangepicker/"
+            })
+        );
+
+        return configs;
+    }
+}

live-editing/configs/DateTimeEditorConfigGenerator.ts

@@ -20,7 +20,7 @@ export class DateTimeEditorConfigGenerator implements IConfigGenerator {
                     ngDeclarations: [DateTimeBasicComponent],
                     ngImports: [IgxInputGroupModule, IgxDateTimeEditorModule, IgxTextSelectionModule]
                 }),
-                shortenComponentPathBy: "/scheduling/datetimeeditor"
+                shortenComponentPathBy: "/scheduling/datetimeeditor/"
             })
         );
 

live-editing/generators/ConfigGenerators.ts

@@ -13,6 +13,7 @@ import { ChipConfigGenerator } from "../configs/ChipConfigGenerator";
 import { CircularProgressbarConfigGenerator } from "../configs/CircularProgressbarConfigGenerator";
 import { ComboConfigGenerator } from "../configs/ComboConfigGenerator";
 import { DatePickerConfigGenerator } from "../configs/DatePickerConfigGenerator";
+import { DateRangePickerConfigGenerator } from "../configs/DateRangePickerConfigGenerator";
 import { DateTimeEditorConfigGenerator } from "../configs/DateTimeEditorConfigGenerator";
 import { DialogConfigGenerator } from "../configs/DialogConfigGenerator";
 import { DividerConfigGenerator } from "../configs/DividerConfigGenerator";
@@ -84,6 +85,7 @@ export const CONFIG_GENERATORS =
         CheckboxConfigGenerator,
         ComboConfigGenerator,
         DatePickerConfigGenerator,
+        DateRangePickerConfigGenerator,
         DateTimeEditorConfigGenerator,
         DropDownConfigGenerator,
         InputGroupConfigGenerator,

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

@@ -1,4 +1,4 @@
-.date-picker-wrapper {
+.datе-picker-wrapper {
     padding: 1rem;
     max-width: 600px;
 }

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

@@ -0,0 +1,5 @@
+
+<igx-date-range-picker [(ngModel)]="range">
+    <label igxLabel>Flight dates</label>
+</igx-date-range-picker>
+

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

@@ -0,0 +1,5 @@
+:host {
+    display: block;
+    padding: 1rem;
+    max-width: 600px;
+}

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

@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+import { DateRange } from "igniteui-angular";
+
+@Component({
+    selector: "basic-rangedatepicker",
+    styleUrls: ["./daterangepicker-basic.scss"],
+    templateUrl: "./daterangepicker-basic.html"
+})
+export class BasicDateRangePickerComponent {
+    public range: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };
+}

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

@@ -0,0 +1,34 @@
+
+<form>
+    <div class="towns">
+        <igx-select name="townFrom" [(ngModel)]="townFrom" class="town-select">
+            <igx-prefix>
+                <igx-icon>flight_takeoff</igx-icon>
+            </igx-prefix>
+            <igx-select-item *ngFor="let town of towns" [value]="town">
+                {{town}}
+            </igx-select-item>
+        </igx-select>
+        <igx-select name="townTo" [(ngModel)]="townTo" class="town-select">
+            <igx-prefix>
+                <igx-icon>flight_land</igx-icon>
+            </igx-prefix>
+            <igx-select-item *ngFor="let town of towns | withoutTownFrom:townFrom" [value]="town">
+                {{town}}
+            </igx-select-item>
+        </igx-select>
+    </div>
+
+    <igx-date-range-picker name="datesRange" #dateRangePicker="ngModel" required
+        [(ngModel)]="range"
+        [minValue]="minDate"
+        [maxValue]="maxDate"
+        [placeholder]="'Depart on - Return on'"
+    >
+        <label igxLabel>Flight dates</label>
+        <igx-hint *ngIf="dateRangePicker.invalid && (dateRangePicker.dirty || dateRangePicker.touched)">
+            Please choose start and end date!
+        </igx-hint>
+    </igx-date-range-picker>
+</form>
+

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

@@ -0,0 +1,16 @@
+:host {
+    display: block;
+    padding: 1rem;
+    max-width: 700px;
+}
+
+.towns {
+    display: flex;
+    margin-top: 16px;
+    justify-content: space-between;
+}
+.town-select {
+    display: inline-block;
+    width: 49%;
+}
+

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

@@ -0,0 +1,54 @@
+import { Component, Pipe, PipeTransform } from "@angular/core";
+import { DateRange } from "igniteui-angular";
+
+@Component({
+    selector: "flight-booking",
+    styleUrls: ["./daterangepicker-flight-booking.scss"],
+    templateUrl: "./daterangepicker-flight-booking.html"
+})
+export class FlightBookingComponent {
+    public towns: string[] = [
+        "New York",
+        "Washington, D.C.",
+        "London",
+        "Berlin",
+        "Sofia",
+        "Rome",
+        "Kiev",
+        "Copenhagen",
+        "Paris",
+        "Barcelona",
+        "Vienna",
+        "Athens",
+        "Dublin",
+        "Yerevan",
+        "Oslo",
+        "Helsinki",
+        "Stockholm",
+        "Prague",
+        "Istanbul"
+    ];
+    public townFrom = "Barcelona";
+    public townTo = "New York";
+    public minDate: Date;
+    public maxDate: Date;
+    public range: DateRange;
+
+    constructor() {
+        const today = new Date();
+
+        this.minDate = new Date();
+        this.minDate.setDate(today.getDate() + 10);
+
+        this.maxDate = new Date();
+        this.maxDate.setDate(today.getDate() + 10);
+        this.maxDate.setMonth(today.getMonth() + 1);
+    }
+}
+
+@Pipe({ name: "withoutTownFrom" })
+export class PipeWithoutTownFrom implements PipeTransform {
+    public transform(collection: any[], townFrom: string) {
+        return collection.filter((item) => item !== townFrom);
+    }
+}

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

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

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

@@ -0,0 +1,5 @@
+:host {
+    display: block;
+    padding: 1rem;
+    max-width: 600px;
+}

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

@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+import { DateRange } from "igniteui-angular";
+
+@Component({
+    selector: "mode-rangedatepicker",
+    styleUrls: ["./daterangepicker-mode.scss"],
+    templateUrl: "./daterangepicker-mode.html"
+})
+export class DateRangePickerModeComponent {
+    public range: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };
+}

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

@@ -0,0 +1,11 @@
+<igx-date-range-picker [(ngModel)]="range">
+    <igx-date-range-start>
+        <input igxInput igxDateTimeEditor type="text">
+        <igx-picker-toggle igxPrefix>
+            <igx-icon>calendar_today</igx-icon>
+        </igx-picker-toggle>
+    </igx-date-range-start>
+    <igx-date-range-end>
+        <input igxInput igxDateTimeEditor type="text">
+    </igx-date-range-end>
+</igx-date-range-picker>

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

@@ -0,0 +1,4 @@
+:host {
+    display: block;
+    padding: 1rem;
+}

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

@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+import { DateRange } from "igniteui-angular";
+
+@Component({
+    selector: "rangedatepicker-start-end",
+    styleUrls: ["./daterangepicker-start-end.scss"],
+    templateUrl: "./daterangepicker-start-end.html"
+})
+export class DateRangePickerStartEndComponent {
+    public range: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };
+}

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

@@ -0,0 +1,11 @@
+<igx-date-range-picker [(ngModel)]="range" [overlaySettings]="{ outlet: element }">
+    <igx-date-range-start>
+        <input igxInput igxDateTimeEditor type="text">
+        <igx-picker-toggle igxPrefix>
+            <igx-icon>calendar_today</igx-icon>
+        </igx-picker-toggle>
+    </igx-date-range-start>
+    <igx-date-range-end>
+        <input igxInput igxDateTimeEditor type="text">
+    </igx-date-range-end>
+</igx-date-range-picker>

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

@@ -0,0 +1,47 @@
+// in component.scss
+@import '~igniteui-angular/lib/core/styles/themes/index';
+
+// common
+$purple: #9E379F;
+$blue: #61AEDB;
+
+$custom-palette: igx-palette($primary: $blue, $secondary: $purple);
+
+$today-text: igx-color($custom-palette, "primary", 500);
+$text-color: igx-color($custom-palette, "secondary", 200);
+$color-focused: igx-color($custom-palette, "secondary", 500);
+
+
+// DATE-RANGE
+$custom-date-range-theme: igx-date-range-picker-theme(
+    $label-color: $color-focused
+);
+
+// INPUT GROUP
+$custom-input-group-theme: igx-input-group-theme(
+  $palette: $custom-palette,
+  $filled-text-color: $text-color,
+  $idle-text-color: $text-color,
+  $focused-text-color: $color-focused,
+  $hover-bottom-line-color: $color-focused,
+  $idle-bottom-line-color: $purple
+);
+
+// CALENDAR styling specific overlay component requires outlet -> [overlaySettings]="{ outlet: element }"
+$custom-calendar-theme: igx-calendar-theme(
+    $palette: $custom-palette,
+    $date-current-text-color: $today-text,
+    $border-radius: 0.5,
+    $date-border-radius: 0.5
+);
+
+:host {
+    display: block;
+    padding: 1rem;
+
+    ::ng-deep {
+        @include igx-date-range-picker($custom-date-range-theme);
+        @include igx-input-group($custom-input-group-theme);
+        @include igx-calendar($custom-calendar-theme);
+    }
+}

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

@@ -0,0 +1,13 @@
+import { Component, ElementRef } from "@angular/core";
+import { DateRange } from "igniteui-angular";
+
+@Component({
+    selector: "styled-rangedatepicker",
+    styleUrls: ["./daterangepicker-styling.scss"],
+    templateUrl: "./daterangepicker-styling.html"
+})
+export class StyledDateRangePickerComponent {
+    public range: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };
+
+    constructor(public element: ElementRef) { }
+}