feat(demo): add datetimePicker testing

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();
+      const el = page.getIonicDatetime();
-      expect(el.getAttribute('value')).toEqual('brains');
+      expect(el.getAttribute('value')).toEqual('2017-11-18T14:17:45-06:00');
     });
   });
 

packages/angular/demo/e2e/basic-inputs.po.ts

@@ -13,12 +13,12 @@ export class BasicInputsPage {
     return element(by.id('checkboxOutput')).getText();
   }
 
-  getIonicSelect() {
+  getIonicDatetime() {
-    return element(by.id('ionSelect'));
+    return element(by.id('ionDatetimeInput'));
   }
 
-  getSelectOutput() {
+  getDatetimeOutput() {
-    return element(by.id('selectOutput')).getText();
+    return element(by.id('datetimeOutput')).getText();
   }
 
   getIonicToggle() {

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');
+    });
+  });
 });

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();
+  }
 }

packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.component.html

@@ -84,36 +84,24 @@
 
   <ion-row>
     <ion-col>
-      <h2>Select</h2>
+      <h2>Toggle</h2>
     </ion-col>
   </ion-row>
   <ion-row>
     <ion-col>
-      <label for="stdSelect">Standard Select (for tacos)</label>
+      <label for="stdToggle">Standard Toggle</label>
-      <select id="stdSelect" name="stdSelect" [(ngModel)]="selectValue" (blur)="onBlur($event)">
+      <input type="checkbox" id="stdToggle" name="stdToggle" [(ngModel)]="toggleValue" (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>
+      <span id="toggleOutput">{{toggleValue}}</span>
     </ion-col>
   </ion-row>
   <ion-row>
     <ion-col>
       <ion-item>
-        <ion-label>Ionic Select (for tacos)</ion-label>
+        <ion-label>Ionic Toggle</ion-label>
-        <ion-select id="ionSelect" name="ionSelect" [(ngModel)]="selectValue" (blur)="onBlur($event)">
+        <ion-toggle id="ionToggle" name="ionToggle" [(ngModel)]="toggleValue" (ionBlur)="onBlur($event)"></ion-toggle>
-          <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>
@@ -122,24 +110,24 @@
 
   <ion-row>
     <ion-col>
-      <h2>Toggle</h2>
+      <h2>Date Time Picker</h2>
     </ion-col>
   </ion-row>
   <ion-row>
     <ion-col>
-      <label for="stdToggle">Standard Toggle</label>
+      <label for="stdToggle">ISO Formatted Date</label>
-      <input type="checkbox" id="stdToggle" name="stdToggle" [(ngModel)]="toggleValue" (blur)="onBlur($event)" />
+      <input id="stdDatetimeInput" name="stdDatetimeInput" [(ngModel)]="datetimeValue" placeholder="YYYY-MM-DDTHH:mm:ssZ" />
     </ion-col>
     <ion-col>
       Value:
-      <span id="toggleOutput">{{toggleValue}}</span>
+      <span id="datetimeOutput">{{datetimeValue}}</span>
     </ion-col>
   </ion-row>
   <ion-row>
     <ion-col>
       <ion-item>
-        <ion-label>Ionic Toggle</ion-label>
+        <ion-label>Ionic Date</ion-label>
-        <ion-toggle id="ionToggle" name="ionToggle" [(ngModel)]="toggleValue" (ionBlur)="onBlur($event)"></ion-toggle>
+        <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>

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() {}

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>

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() {}
 

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 {