feat(date-picker): Initial changes to support edit field #3034

IgniteUI · Nov 30, 2018 · 73118b8 · 73118b8
1 parent 8ffd463
commit 73118b8
Show file tree

Hide file tree

Showing 5 changed files with 419 additions and 221 deletions.
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.html b/projects/igniteui-angular/src/lib/calendar/calendar.component.html
@@ -12,15 +12,16 @@
     </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 class="igx-calendar-picker__prev" (click)="previousMonth()">
             <igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
@@ -40,8 +41,8 @@ <h2 class="igx-calendar__header-date">
         </span>
     </div>
 
-    <div *ngFor="let week of getCalendarMonth; last as isLast; index as i; trackBy: rowTracker" class="igx-calendar__body-row" [@animateChange]="monthAction"
-        (@animateChange.done)="animationDone($event, isLast)">
+    <div *ngFor="let week of getCalendarMonth; last as isLast; index as i; trackBy: rowTracker" class="igx-calendar__body-row"
+        [@animateChange]="monthAction" (@animateChange.done)="animationDone($event, isLast)">
         <span [igxCalendarDate]="day" (onDateSelection)="childClicked($event)" *ngFor="let day of week; trackBy: dateTracker">
             {{ formattedDate(day.date) }}
         </span>
@@ -62,4 +63,4 @@ <h2 class="igx-calendar__header-date">
             {{ formattedYear(year) }}
         </span>
     </div>
-</div>
+</div>
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
@@ -281,6 +281,9 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
         this.initFormatters();
     }
 
+    @Input()
+    public hasHeader = true;
+
     /**
      * Gets whether the `day`, `month` and `year` should be rendered
      * according to the locale and formatOptions, if any.

diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html
@@ -1,16 +1,46 @@
-<div [ngClass]="{'igx-date-picker': !vertical, 'igx-date-picker--vertical': vertical}">
-    <ng-template #defaultDatePickerTemplate>
-        <igx-input-group (click)="openDialog()">
-            <igx-prefix>
-                <igx-icon>today</igx-icon>
-            </igx-prefix>
-            <label *ngIf="labelVisibility" igxLabel>{{label}}</label>
-            <input class="igx-date-picker__input-date" igxInput [value]="displayData" [disabled]="disabled" readonly />
-        </igx-input-group>
-    </ng-template>
-    <ng-container *ngTemplateOutlet="template; context: context"></ng-container>
-    <igx-dialog class="igx-date-picker__dialog-popup" closeOnOutsideSelect="true" [leftButtonLabel]="cancelButtonLabel" (onLeftButtonSelect)="alert.close()"
-        [rightButtonLabel]="todayButtonLabel" (onRightButtonSelect)="triggerTodaySelection()">
-        <ng-container #container></ng-container>
-    </igx-dialog>
+<ng-template #readOnlyDatePickerTemplate>
+    <div [ngClass]="{'igx-date-picker': !vertical, 'igx-date-picker--vertical': vertical}">
+        <ng-template #defaultDatePickerTemplate>
+            <igx-input-group (click)="openCalendar()">
+                <igx-prefix>
+                    <igx-icon>today</igx-icon>
+                </igx-prefix>
+                <label *ngIf="labelVisibility" igxLabel>{{label}}</label>
+                <input #readonlyInput class="igx-date-picker__input-date" igxInput [value]="displayData" [disabled]="disabled"
+                    readonly />
+            </igx-input-group>
+        </ng-template>
+        <ng-container *ngTemplateOutlet="template; context: context"></ng-container>
+    </div>
+</ng-template>
+
+<ng-template #editableDatePickerTemplate>
+    <igx-input-group>
+        <label *ngIf="labelVisibility" igxLabel>{{label}}</label>
+        <input #editableInput class="igx-date-picker__input-date" igxInput type="text" [value]="displayData" (blur)="handleInput($event)"
+            (onclick)="closeCalendar()" [igxFocus]="true" />
+        <igx-suffix *ngIf="displayData !== ''" igxRipple (click)="clear()">
+            <igx-icon>clear</igx-icon>
+        </igx-suffix>
+        <igx-suffix igxRipple (click)="openCalendar()">
+            <igx-icon>today</igx-icon>
+        </igx-suffix>
+    </igx-input-group>
+</ng-template>
+
+<div #calendarContainer style="background-color: black;">
+    <igx-calendar #calendar *ngIf="isCalendarVisible" [hasHeader]="hasHeader" [formatOptions]="formatOptions"
+        [formatViews]="formatViews" [locale]="locale" [vertical]="vertical" [weekStart]="weekStart" (onSelection)="handleSelection($event)"></igx-calendar>
+
+    <div *ngIf=" mode==='readonly' && isCalendarVisible &&
+        (cancelButtonLabel || todayButtonLabel)" style="display: flex; flex-flow: row nowrap; justify-content: flex-end; padding: .5rem;">
+        <button *ngIf="cancelButtonLabel" igxButton="flat" igxRipple (click)="closeCalendar()">
+            {{ cancelButtonLabel }}
+        </button>
+        <button *ngIf="todayButtonLabel" igxButton="flat" igxRipple (click)="triggerTodaySelection()">
+            {{ todayButtonLabel }}
+        </button>
+    </div>
 </div>
+
+<ng-container *ngTemplateOutlet="datePickerTemplate"></ng-container>