editable date picker

CHANGELOG.md

@@ -104,6 +104,12 @@ All notable changes for each version of this project will be documented in this
     - `igxOverlay.attach(component, settings?)` method added. Use this method to obtain an unique Id of the created overlay where the provided component will be shown. Then call `igxOverlay.show(id, settings?)` method to show the component in overlay.
     - `igxOverlay.show(component, settings)` is **depricated**. Use `igxOverlay.attach(component, settings?)` method to obtain an Id, and then call `igxOverlay.show(id, settings)` method to show a component in the overlay.
 
+- `igx-date-picker`
+    - **Feature** Added editable `mode` to enable the input field value editing and spinning of the date parts. Example:
+    ```html
+      <igx-date-picker #editableDatePicker1 mode="editable" [value]="date" format="dd.MM.y" mask="M/d/y">
+      </igx-date-picker>
+     ```
  **Components roundness**
 - Ignite UI for Angular now allows you to change the shape of components by changing their border-radius.
 

projects/igniteui-angular/src/lib/calendar/calendar.component.html

@@ -4,25 +4,29 @@
 </ng-template>
 
 <ng-template let-result #defaultMonth>
-    <span tabindex="0" #monthsBtn (keydown)="activeViewYearKB($event)" (click)="activeViewYear()" class="igx-calendar-picker__date">
+    <span tabindex="0" #monthsBtn (keydown)="activeViewYearKB($event)" (click)="activeViewYear()"
+        class="igx-calendar-picker__date">
         {{ formattedMonth(viewDate) }}
     </span>
-    <span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event)" (click)="activeViewDecade()" class="igx-calendar-picker__date">
+    <span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event)" (click)="activeViewDecade()"
+        class="igx-calendar-picker__date">
         {{ formattedYear(viewDate) }}
     </span>
 </ng-template>
 
-<div *ngIf="selection === 'single'" class="igx-calendar__header">
+<div *ngIf="selection === 'single' && hasHeader" class="igx-calendar__header">
     <h5 class="igx-calendar__header-year">{{ formattedYear(headerDate) }}</h5>
     <h2 class="igx-calendar__header-date">
         <ng-container *ngTemplateOutlet="headerTemplate ? headerTemplate : defaultHeader; context: headerContext">
         </ng-container>
     </h2>
 </div>
 
-<div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (swiperight)="previousMonth()" (swipeleft)="nextMonth()">
+<div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (swiperight)="previousMonth()"
+    (swipeleft)="nextMonth()">
     <div class="igx-calendar-picker">
-        <div tabindex="0" class="igx-calendar-picker__prev" (keydown)="previousMonthKB($event)" (click)="previousMonth()">
+        <div tabindex="0" class="igx-calendar-picker__prev" (keydown)="previousMonthKB($event)"
+            (click)="previousMonth()">
             <igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
         </div>
         <div>
@@ -34,31 +38,17 @@ <h2 class="igx-calendar__header-date">
         </div>
     </div>
 
-    <igx-days-view [changeDaysView]="true" #days
-                   [animationAction]="monthAction"
-                   [locale]="locale"
-                   [value]="value"
-                   [weekStart]="weekStart"
-                   [formatOptions]="formatOptions"
-                   [viewDate]="viewDate"
-                   [selection]="selection"
-                   [disabledDates]="disabledDates"
-                   [specialDates]="specialDates"
-                   (onViewChanged)="viewChanged($event)"
-                   (onDateSelection)="childClicked($event)">
+    <igx-days-view [changeDaysView]="true" #days [animationAction]="monthAction" [locale]="locale" [value]="value"
+        [weekStart]="weekStart" [formatOptions]="formatOptions" [viewDate]="viewDate" [selection]="selection"
+        [disabledDates]="disabledDates" [specialDates]="specialDates" (onViewChanged)="viewChanged($event)"
+        (onDateSelection)="childClicked($event)">
     </igx-days-view>
 </div>
 
-<igx-months-view *ngIf="isYearView" [@animateView]="activeView" #months
-                                    [date]="viewDate"
-                                    [locale]="locale"
-                                    [monthFormat]="formatOptions.month"
-                                    (onSelection)="changeMonth($event)" >
+<igx-months-view *ngIf="isYearView" [@animateView]="activeView" #months [date]="viewDate" [locale]="locale"
+    [monthFormat]="formatOptions.month" (onSelection)="changeMonth($event)">
 </igx-months-view>
 
-<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade
-                                     [date]="viewDate"
-                                     [locale]="locale"
-                                     [yearFormat]="formatOptions.year"
-                                     (onSelection)="changeYear($event)">
-</igx-years-view>
+<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade [date]="viewDate" [locale]="locale"
+    [yearFormat]="formatOptions.year" (onSelection)="changeYear($event)">
+</igx-years-view>

projects/igniteui-angular/src/lib/calendar/calendar.component.ts

@@ -73,6 +73,9 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
     @Input()
     public id = `igx-calendar-${NEXT_ID++}`;
 
+    @Input()
+    public hasHeader = true;
+
     /**
      * Gets whether the `day`, `month` and `year` should be rendered
      * according to the locale and formatOptions, if any.
@@ -146,19 +149,19 @@ export class IgxCalendarComponent extends IgxDaysViewComponent {
     /**
      * @hidden
      */
-    @ViewChild('decade', {read: IgxYearsViewComponent})
+    @ViewChild('decade', { read: IgxYearsViewComponent })
     public dacadeView: IgxYearsViewComponent;
 
     /**
      * @hidden
      */
-    @ViewChild('months', {read: IgxMonthsViewComponent})
+    @ViewChild('months', { read: IgxMonthsViewComponent })
     public monthsView: IgxMonthsViewComponent;
 
     /**
      * @hidden
      */
-    @ViewChild('days', {read: IgxDaysViewComponent})
+    @ViewChild('days', { read: IgxDaysViewComponent })
     public daysView: IgxDaysViewComponent;
 
     /**

projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts

@@ -1014,10 +1014,8 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
                 setTimeout(() => {
                     date.nativeElement.focus();
                 }, parseInt(slideInRight.options.params.duration, 10));
-            } else if (this.callback) {
-                setTimeout(() => {
-                    this.callback(this.dates, this._nextDate);
-                }, parseInt(slideInRight.options.params.duration, 10));
+            } else if (this.callback && (event.toState === 'next' || event.toState === 'prev')) {
+                this.callback(this.dates, this._nextDate);
             }
         }
     }
@@ -1028,6 +1026,8 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
     @HostListener('keydown.arrowup', ['$event'])
     public onKeydownArrowUp(event: KeyboardEvent) {
         event.preventDefault();
+        event.stopPropagation();
+
         this.focusPreviousUpDate(event.target);
     }
 
@@ -1037,6 +1037,8 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
     @HostListener('keydown.arrowdown', ['$event'])
     public onKeydownArrowDown(event: KeyboardEvent) {
         event.preventDefault();
+        event.stopPropagation();
+
         this.focusNextDownDate(event.target);
     }
 
@@ -1055,6 +1057,8 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
     @HostListener('keydown.arrowright', ['$event'])
     public onKeydownArrowRight(event: KeyboardEvent) {
         event.preventDefault();
+        event.stopPropagation();
+
         this.focusNextDate(event.target);
     }
 
@@ -1064,6 +1068,7 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
     @HostListener('keydown.home', ['$event'])
     public onKeydownHome(event: KeyboardEvent) {
         event.preventDefault();
+        event.stopPropagation();
 
         const dates = this.dates.filter(d => d.isCurrentMonth);
         for (let i = 0; i < dates.length; i++) {
@@ -1080,6 +1085,7 @@ export class IgxDaysViewComponent implements ControlValueAccessor, DoCheck {
     @HostListener('keydown.end', ['$event'])
     public onKeydownEnd(event: KeyboardEvent) {
         event.preventDefault();
+        event.stopPropagation();
 
         const dates = this.dates.filter(d => d.isCurrentMonth);
         for (let i = dates.length - 1; i >= 0; i--) {

projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html

@@ -1,6 +1,6 @@
 <div class="igx-calendar__body">
     <div class="igx-calendar__body-row--wrap">
-        <div [igxCalendarMonth]="month" [date]="date" (onMonthSelection)="selectMonth($event)" [index]="i" *ngFor="let month of months; index as i;">
+        <div [igxCalendarMonth]="month" [date]="date" (onMonthSelection)="selectMonth($event)" [index]="i" *ngFor="let month of months; index as i; trackBy: monthTracker">
             {{ formattedMonth(month) | titlecase }}
         </div>
     </div>

projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts

@@ -228,6 +228,14 @@ export class IgxMonthsViewComponent implements ControlValueAccessor {
         }
     }
 
+    /**
+     * @hidden
+     */
+    public monthTracker(index, item): string {
+        return `${item.getMonth()}}`;
+    }
+
+
     /**
      *@hidden
      */

projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.html

@@ -1,6 +1,6 @@
 <div class="igx-calendar__body">
     <div class="igx-calendar__body-column" (wheel)="scroll($event)" (pan)="pan($event)">
-        <span [igxCalendarYear]="year" [date]="date" (onYearSelection)="selectYear($event)" *ngFor="let year of decade">
+        <span [igxCalendarYear]="year" [date]="date" (onYearSelection)="selectYear($event)" *ngFor="let year of decade; trackBy: yearTracker">
             {{ formattedYear(year) }}
         </span>
     </div>

projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts

@@ -238,6 +238,13 @@ export class IgxYearsViewComponent implements ControlValueAccessor {
         this._onTouchedCallback = fn;
     }
 
+    /**
+     * @hidden
+     */
+    public yearTracker(index, item): string {
+        return `${item.getFullYear()}}`;
+    }
+
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-component.scss

@@ -9,13 +9,17 @@
     $this: bem--selector-to-string(&);
     @include register-component(str-slice($this, 2, -1));
 
-    .igx-dialog__window {
-        @extend %date-picker-display !optional;
+    @extend %date-picker !optional;
+
+    @include e(buttons) {
+        @extend %date-picker__buttons !optional;
     }
 
     @include m(vertical) {
-        .igx-dialog__window {
-            @extend %date-picker-display--vertical !optional;
-        }
+        @extend %date-picker--vertical !optional;
+    }
+
+    @include m(dropdown) {
+        @extend %date-picker--dropdown !optional;
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss

@@ -5,31 +5,116 @@
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
 ////
 
-/// Date Picker
-/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
-/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
-///
-/// @requires $default-palette
-/// @requires $light-schema
-/// @requires apply-palette
-/// @requires extend
-@function igx-date-picker-theme(
-    $palette: $default-palette,
-    $schema: $light-schema
-) {
-    $name: 'igx-date-picker';
-    $theme: apply-palette(map-get($schema, $name), $palette);
-    @return extend($theme, (name: $name, palette: $palette));
-}
-
-/// @param {Map} $theme - The theme used to style the component.
+/// @param {Map} $theme - The calendar theme used to style the component.
+/// @requires $elevations
+/// @requires igx-elevation
+/// @requires rem
 @mixin igx-date-picker($theme) {
-    %date-picker-display {
-        width: 340px;
+    %date-picker {
+        min-width: 200px;
+        max-width: 340px;
+        box-shadow: igx-elevation($elevations, 24);
+        border-radius: rem(4px);
+        background: --var($theme, 'content-background');
+        overflow: hidden;
+
+        %cal-display {
+            background: --var($theme, 'content-background');
+        }
+
+        %cal-header-display {
+            background-color: --var($theme, 'header-background');
+            color: --var($theme, 'header-text-color');
+        }
+
+        %cal-picker-arrow {
+            color: --var($theme, 'picker-arrow-color');
+
+            &:hover {
+                color: --var($theme, 'picker-arrow-hover-color');
+            }
+        }
+
+        %cal-picker-date {
+            color: --var($theme, 'picker-text-color');
+
+            &:hover,
+            &:focus {
+                color: --var($theme, 'picker-text-hover-color');
+            }
+        }
+
+        %cal-value {
+            color: --var($theme, 'content-text-color');
+        }
+
+        %cal-value--label {
+            color: --var($theme, 'inactive-text-color');
+        }
+
+        %cal-value--weekend {
+            color: --var($theme, 'weekend-text-color');
+        }
+
+        %cal-value--special {
+            color: --var($theme, 'date-special-text-color');
+            background: --var($theme, 'date-special-background');
+        }
+
+        %cal-value--disabled {
+            color: --var($theme, 'date-disabled-text-color');
+        }
+
+        %cal-value--year-current {
+            color: --var($theme, 'year-current-text-color');
+        }
+
+        %cal-value--year-hover {
+            color: --var($theme, 'year-hover-text-color');
+        }
+
+        %cal-value--month-hover {
+            color: --var($theme, 'month-hover-text-color');
+        }
+
+        %cal-value--month-current {
+            color: --var($theme, 'month-current-text-color');
+        }
+
+        %cal-value--inactive {
+            color: --var($theme, 'inactive-text-color');
+        }
+
+        %cal-value--selected {
+            color: --var($theme, 'date-selected-text-color');
+            background-color: --var($theme, 'date-selected-background') !important;
+        }
+
+        %cal-value--current {
+            color: --var($theme, 'date-current-text-color');
+        }
+
+        %cal-value--hover {
+            background-color: --var($theme, 'date-hover-background');
+        }
     }
 
-    %date-picker-display--vertical {
-        width: 540px;
+    %date-picker--vertical {
+        min-width: 368px; /* 168px for header + 200px for the content */
+        max-width: 540px;
+    }
+
+    %date-picker--dropdown {
+        display: flex;
+        flex: 1 0 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        box-shadow: igx-elevation($elevations, 3);
     }
-}
 
+    %date-picker__buttons {
+        display: flex;
+        justify-content: flex-end;
+        padding: rem(8px);
+    }
+}

projects/igniteui-angular/src/lib/core/styles/themes/_index.scss

@@ -165,7 +165,7 @@
     }
 
     @if not(index($exclude, 'igx-date-picker')) {
-        @include igx-date-picker(igx-date-picker-theme($palette, $schema));
+        @include igx-date-picker(igx-calendar-theme($palette, $schema));
     }
 
     @if not(index($exclude, 'igx-dialog')) {