feat(datetime): add ion-datetime

ionic/components/datetime/test/basic/e2e.ts

@@ -0,0 +1,8 @@
+
+it('should open basic datetime picker', function() {
+  element(by.css('.e2eOpenMMDDYYYY')).click();
+});
+
+it('should close with Done button click', function() {
+  element(by.css('.picker-button:last-child')).click();
+});

ionic/components/datetime/test/basic/index.ts

@@ -0,0 +1,41 @@
+import {App, Page} from '../../../../../ionic';
+
+
+@Page({
+  templateUrl: 'main.html'
+})
+class E2EPage {
+  wwwInvented = '1989';
+  time = '13:47';
+  netscapeReleased = '1994-12-15T13:47:20.789';
+  operaReleased = '1995-04-15';
+  firefoxReleased = '2002-09-23T15:03:46.789';
+  webkitOpenSourced = '2005-06-17T11:06Z';
+  chromeReleased = '2008-09-02';
+  leapYearsSummerMonths = '';
+
+  leapYearsArray = [2020, 2016, 2008, 2004, 2000, 1996];
+
+  customShortDay = [
+    's\u00f8n',
+    'man',
+    'tir',
+    'ons',
+    'tor',
+    'fre',
+    'l\u00f8r'
+  ];
+
+}
+
+
+@App({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  root;
+
+  constructor() {
+    this.root = E2EPage;
+  }
+}

ionic/components/datetime/test/basic/main.html

@@ -0,0 +1,68 @@
+<ion-toolbar>
+  <ion-title>Datetime</ion-title>
+</ion-toolbar>
+
+<ion-content class="outer-content">
+
+  <ion-item>
+    <ion-label>YYYY</ion-label>
+    <ion-datetime displayFormat="YYYY" min="1981" max="2002" [(ngModel)]="wwwInvented"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>MMMM YY</ion-label>
+    <ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" [(ngModel)]="netscapeReleased"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>MMM DD, YYYY</ion-label>
+    <ion-datetime displayFormat="MMM DD, YYYY" min="1994-03-14" max="2012-12-09" [(ngModel)]="firefoxReleased" class="e2eOpenMMDDYYYY"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>DDD. MM/DD/YY (locale day)</ion-label>
+    <ion-datetime displayFormat="DDD. MM/DD/YY" min="1990-02" max="2000" [dayShortNames]="customShortDay" [(ngModel)]="operaReleased"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>D MMM YYYY H:mm</ion-label>
+    <ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" [(ngModel)]="webkitOpenSourced"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>DDDD MMM D, YYYY</ion-label>
+    <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" [(ngModel)]="chromeReleased"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>HH:mm</ion-label>
+    <ion-datetime displayFormat="HH:mm" [(ngModel)]="time"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>h:mm a</ion-label>
+    <ion-datetime displayFormat="h:mm a" [(ngModel)]="time"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>hh:mm A (15 min steps)</ion-label>
+    <ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Leap years, summer months</ion-label>
+    <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" [yearValues]="leapYearsArray" monthValues="6,7,8" [(ngModel)]="leapYearsSummerMonths"></ion-datetime>
+  </ion-item>
+
+  <p aria-hidden="true" padding>
+    <code>wwwInvented: {{wwwInvented}}</code><br>
+    <code>netscapeReleased: {{netscapeReleased}}</code><br>
+    <code>operaReleased: {{operaReleased}}</code><br>
+    <code>firefoxReleased: {{firefoxReleased}}</code><br>
+    <code>webkitOpenSourced: {{webkitOpenSourced}}</code><br>
+    <code>chromeReleased: {{chromeReleased}}</code><br>
+    <code>time: {{time}}</code><br>
+    <code>Leap year, summer months: {{leapYearsSummerMonths}}</code><br>
+  </p>
+
+</ion-content>