#632 basic date picker dialog

ng2-components/ng2-activiti-form/package.json

@@ -63,6 +63,7 @@
 
     "ng2-translate": "2.5.0",
     "moment": "2.15.1",
+    "md-date-time-picker": "^2.2.0",
 
     "alfresco-js-api": "^0.3.0",
     "ng2-alfresco-core": "0.3.2"

ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.css

@@ -2,6 +2,10 @@
     width: 100%;
 }
 
+.date-widget--button {
+    margin-top: 15px;
+}
+
 .date-widget__invalid .mdl-textfield__input {
     border-color: #d50000;
 }

ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html

@@ -1,12 +1,25 @@
-<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label date-widget"
+<div class="mdl-grid">
-     [class.date-widget__invalid]="!field.isValid">
+    <div class="mdl-cell mdl-cell--11-col">
-    <input class="mdl-textfield__input"
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label date-widget"
-           type="text"
+            [class.date-widget__invalid]="!field.isValid">
-           [attr.id]="field.id"
+            <input id="dateInput"
-           [attr.required]="isRequired()"
+                class="mdl-textfield__input"
-           [(ngModel)]="field.value"
+                type="text"
-           (ngModelChange)="checkVisibility(field)"
+                [attr.id]="field.id"
-           [disabled]="field.readOnly">
+                [attr.required]="isRequired()"
-    <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}} (d-M-yyyy)</label>
+                [(ngModel)]="field.value"
-    <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
+                (ngModelChange)="onDateChanged()"
+                (onOk)="onDateSelected()"
+                [disabled]="field.readOnly">
+            <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}} (d-M-yyyy)</label>
+            <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
+        </div>
+    </div>
+    <div class="mdl-cell mdl-cell--1-col">
+        <button
+            class="mdl-button mdl-js-button mdl-button--icon date-widget--button"
+            (click)="datePicker.toggle()">
+            <i class="material-icons">date_range</i>
+        </button>
+    </div>
 </div>

ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, ElementRef } from '@angular/core';
+import { Component, ElementRef, OnInit } from '@angular/core';
 import { TextFieldWidgetComponent } from './../textfield-widget.component';
 
 @Component({
@@ -24,10 +24,33 @@ import { TextFieldWidgetComponent } from './../textfield-widget.component';
     templateUrl: './date.widget.html',
     styleUrls: ['./date.widget.css']
 })
-export class DateWidget extends TextFieldWidgetComponent {
+export class DateWidget extends TextFieldWidgetComponent implements OnInit {
+
+    datePicker: any = new mdDateTimePicker.default({
+        type: 'date',
+        future: moment().add(21, 'years')
+    });
 
     constructor(elementRef: ElementRef) {
         super(elementRef);
     }
 
+    ngOnInit() {
+        if (this.field.value) {
+            this.datePicker.time = moment(this.field.value, 'D-M-YYYY');
+        }
+        this.datePicker.trigger = this.elementRef.nativeElement.querySelector('#dateInput');
+    }
+
+    onDateChanged() {
+        if (this.field.value) {
+            this.datePicker.time = moment(this.field.value, 'D-M-YYYY');
+        }
+        this.checkVisibility(this.field);
+    }
+
+    onDateSelected() {
+        this.field.value = this.datePicker.time.format('DD-MM-YYYY');
+    }
+
 }

ng2-components/ng2-activiti-form/src/declarations.d.ts

@@ -17,6 +17,7 @@
 
 declare var module: any;
 declare var moment: any;
+declare let mdDateTimePicker: any;
 
 // MDL
 declare var componentHandler: any;