From df4a9ea6b45c34afd3d9d4a3e3363e277b9b05c2 Mon Sep 17 00:00:00 2001
From: Ken Sodemann <ken@ionic.io>
Date: Tue, 28 Nov 2017 11:52:04 -0600
Subject: [PATCH] feat(demo): add datetimePicker testing

---
 .../angular/demo/e2e/basic-inputs.e2e-spec.ts |  6 +-
 packages/angular/demo/e2e/basic-inputs.po.ts  |  8 +--
 .../angular/demo/e2e/group-inputs.e2e-spec.ts |  8 +++
 packages/angular/demo/e2e/group-inputs.po.ts  |  8 +++
 .../basic-inputs-page.component.html          | 64 ++++++++-----------
 .../basic-inputs-page.component.ts            |  3 +-
 .../group-inputs-page.component.html          | 38 +++++++++++
 .../group-inputs-page.component.ts            |  1 +
 .../ion-select-value-accessor.directive.ts    |  2 +-
 9 files changed, 90 insertions(+), 48 deletions(-)

diff --git a/packages/angular/demo/e2e/basic-inputs.e2e-spec.ts b/packages/angular/demo/e2e/basic-inputs.e2e-spec.ts
index 146c7d1c19..b9fed68a2a 100644
--- a/packages/angular/demo/e2e/basic-inputs.e2e-spec.ts
+++ b/packages/angular/demo/e2e/basic-inputs.e2e-spec.ts
@@ -100,11 +100,11 @@ describe('Basic Inputs Page', () => {
     });
   });
 
-  describe('select input', () => {
+  describe('date time picker', () => {
     it('should be set the initial value', () => {
       page.navigateTo();
-      const el = page.getIonicSelect();
-      expect(el.getAttribute('value')).toEqual('brains');
+      const el = page.getIonicDatetime();
+      expect(el.getAttribute('value')).toEqual('2017-11-18T14:17:45-06:00');
     });
   });
 
diff --git a/packages/angular/demo/e2e/basic-inputs.po.ts b/packages/angular/demo/e2e/basic-inputs.po.ts
index 2850dcd9ad..54d6eb2849 100644
--- a/packages/angular/demo/e2e/basic-inputs.po.ts
+++ b/packages/angular/demo/e2e/basic-inputs.po.ts
@@ -13,12 +13,12 @@ export class BasicInputsPage {
     return element(by.id('checkboxOutput')).getText();
   }
 
-  getIonicSelect() {
-    return element(by.id('ionSelect'));
+  getIonicDatetime() {
+    return element(by.id('ionDatetimeInput'));
   }
 
-  getSelectOutput() {
-    return element(by.id('selectOutput')).getText();
+  getDatetimeOutput() {
+    return element(by.id('datetimeOutput')).getText();
   }
 
   getIonicToggle() {
diff --git a/packages/angular/demo/e2e/group-inputs.e2e-spec.ts b/packages/angular/demo/e2e/group-inputs.e2e-spec.ts
index 18cc3a6f3c..ef789cc124 100644
--- a/packages/angular/demo/e2e/group-inputs.e2e-spec.ts
+++ b/packages/angular/demo/e2e/group-inputs.e2e-spec.ts
@@ -100,4 +100,12 @@ describe('Group Inputs Page', () => {
       });
     });
   });
+
+  describe('select input', () => {
+    it('should be set the initial value', () => {
+      page.navigateTo();
+      const el = page.getIonicSelect();
+      expect(el.getAttribute('value')).toEqual('brains');
+    });
+  });
 });
diff --git a/packages/angular/demo/e2e/group-inputs.po.ts b/packages/angular/demo/e2e/group-inputs.po.ts
index 5dae783af0..4d21c87c09 100644
--- a/packages/angular/demo/e2e/group-inputs.po.ts
+++ b/packages/angular/demo/e2e/group-inputs.po.ts
@@ -50,4 +50,12 @@ export class GroupInputsPage {
   getRadioOutputText() {
     return element(by.id('radioOutput')).getText();
   }
+
+  getIonicSelect() {
+    return element(by.id('ionSelect'));
+  }
+
+  getSelectOutput() {
+    return element(by.id('selectOutput')).getText();
+  }
 }
diff --git a/packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.component.html b/packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.component.html
index 2f3eb0e960..011c9d0cf8 100644
--- a/packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.component.html
+++ b/packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.component.html
@@ -82,44 +82,6 @@
     </ion-col>
   </ion-row>
 
-  <ion-row>
-    <ion-col>
-      <h2>Select</h2>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <label for="stdSelect">Standard Select (for tacos)</label>
-      <select id="stdSelect" name="stdSelect" [(ngModel)]="selectValue" (blur)="onBlur($event)">
-        <option value="beef">Carne Asada</option>
-        <option value="tongue">Lengua</option>
-        <option value="brains">Sesos</option>
-        <option value="tripe">Tripa</option>
-        <option value="chicken">Pollo</option>
-      </select>
-    </ion-col>
-    <ion-col>
-      Value:
-      <span id="selectOutput">{{selectValue}}</span>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <ion-item>
-        <ion-label>Ionic Select (for tacos)</ion-label>
-        <ion-select id="ionSelect" name="ionSelect" [(ngModel)]="selectValue" (blur)="onBlur($event)">
-          <ion-select-option value="beef">Carne Asada</ion-select-option>
-          <ion-select-option value="tongue">Lengua</ion-select-option>
-          <ion-select-option value="brains">Sesos</ion-select-option>
-          <ion-select-option value="tripe">Tripa</ion-select-option>
-          <ion-select-option value="chicken">Pollo</ion-select-option>
-        </ion-select>
-      </ion-item>
-    </ion-col>
-    <ion-col>
-    </ion-col>
-  </ion-row>
-
   <ion-row>
     <ion-col>
       <h2>Toggle</h2>
@@ -145,6 +107,32 @@
     <ion-col>
     </ion-col>
   </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <h2>Date Time Picker</h2>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <label for="stdToggle">ISO Formatted Date</label>
+      <input id="stdDatetimeInput" name="stdDatetimeInput" [(ngModel)]="datetimeValue" placeholder="YYYY-MM-DDTHH:mm:ssZ" />
+    </ion-col>
+    <ion-col>
+      Value:
+      <span id="datetimeOutput">{{datetimeValue}}</span>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Ionic Date</ion-label>
+        <ion-datetime id="ionDatetimeInput" pickerFormat="YYYY-MM-DD HH:mm:ss" displayFormat="MM/DD/YYYY HH:mm:ss" name="ionDatetimeInput" [(ngModel)]="datetimeValue"></ion-datetime>
+      </ion-item>
+    </ion-col>
+    <ion-col>
+    </ion-col>
+  </ion-row>
 </ion-grid>
 
 <a href='home'>Home</a>
diff --git a/packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.component.ts b/packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.component.ts
index eff5f2c4fa..6f87ad0977 100644
--- a/packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.component.ts
+++ b/packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.component.ts
@@ -7,14 +7,13 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
   encapsulation: ViewEncapsulation.None
 })
 export class BasicInputsPageComponent implements OnInit {
+  datetimeValue = '2017-11-18T14:17:45-06:00';
   textareaValue = 'This is the Textarea Input';
   textValue = 'This is the Text Input';
 
   checkboxValue = true;
   toggleValue = false;
 
-  selectValue = 'brains';
-
   constructor() {}
 
   ngOnInit() {}
diff --git a/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.html b/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.html
index 3424fbb2c8..f0aa2e0da0 100644
--- a/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.html
+++ b/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.html
@@ -116,5 +116,43 @@
     <ion-col></ion-col>
   </ion-row>
 
+  <ion-row>
+    <ion-col>
+      <h2>Select</h2>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <label for="stdSelect">Standard Select (for tacos)</label>
+      <select id="stdSelect" name="stdSelect" [(ngModel)]="selectValue">
+        <option value="beef">Carne Asada</option>
+        <option value="tongue">Lengua</option>
+        <option value="brains">Sesos</option>
+        <option value="tripe">Tripa</option>
+        <option value="chicken">Pollo</option>
+      </select>
+    </ion-col>
+    <ion-col>
+      Value:
+      <span id="selectOutput">{{selectValue}}</span>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Ionic Select (for tacos)</ion-label>
+        <ion-select id="ionSelect" name="ionSelect" [(ngModel)]="selectValue">
+          <ion-select-option value="beef">Carne Asada</ion-select-option>
+          <ion-select-option value="tongue">Lengua</ion-select-option>
+          <ion-select-option value="brains">Sesos</ion-select-option>
+          <ion-select-option value="tripe">Tripa</ion-select-option>
+          <ion-select-option value="chicken">Pollo</ion-select-option>
+        </ion-select>
+      </ion-item>
+    </ion-col>
+    <ion-col>
+    </ion-col>
+  </ion-row>
+
 </ion-grid>
 <a href='home'>Home</a>
diff --git a/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.ts b/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.ts
index 4e3eaf264f..a48b8a8311 100644
--- a/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.ts
+++ b/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.ts
@@ -8,6 +8,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 })
 export class GroupInputsPageComponent implements OnInit {
   radioValue = 'tripe';
+  selectValue = 'brains';
 
   constructor() {}
 
diff --git a/packages/angular/demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts b/packages/angular/demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts
index 343d12cd2a..e03e4920be 100644
--- a/packages/angular/demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts
+++ b/packages/angular/demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts
@@ -6,7 +6,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 // https://github.com/angular/angular/blob/5.0.2/packages/forms/src/directives/select_control_value_accessor.ts#L28-L158
 @Directive({
   /* tslint:disable-next-line:directive-selector */
-  selector: 'ion-select, ion-radio-group, ion-segment',
+  selector: 'ion-select, ion-radio-group, ion-segment, ion-datetime',
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonSelectValueAccessorDirective, multi: true }]
 })
 export class IonSelectValueAccessorDirective implements ControlValueAccessor {