feat(datetime): add ion-datetime

ionic/components.ios.scss

@@ -14,6 +14,7 @@
   "components/checkbox/checkbox.ios",
   "components/chip/chip.ios",
   "components/content/content.ios",
+  "components/datetime/datetime.ios",
   "components/input/input.ios",
   "components/item/item.ios",
   "components/label/label.ios",

ionic/components.ts

@@ -5,6 +5,7 @@ export * from './components/badge/badge';
 export * from './components/button/button';
 export * from './components/checkbox/checkbox';
 export * from './components/content/content';
+export * from './components/datetime/datetime';
 export * from './components/icon/icon';
 export * from './components/img/img';
 export * from './components/infinite-scroll/infinite-scroll';

ionic/components/datetime/datetime.ios.scss

@@ -0,0 +1,15 @@
+@import "../../globals.ios";
+@import "./datetime";
+
+// iOS DateTime
+// --------------------------------------------------
+
+$datetime-ios-padding-top:         $item-ios-padding-top !default;
+$datetime-ios-padding-right:       ($item-ios-padding-right / 2) !default;
+$datetime-ios-padding-bottom:      $item-ios-padding-bottom !default;
+$datetime-ios-padding-left:        $item-ios-padding-left !default;
+
+
+ion-datetime {
+  padding: $datetime-ios-padding-top $datetime-ios-padding-right $datetime-ios-padding-bottom $datetime-ios-padding-left;
+}

ionic/components/datetime/datetime.scss

@@ -0,0 +1,30 @@
+@import "../../globals.core";
+
+// DateTime
+// --------------------------------------------------
+
+ion-datetime {
+  display: flex;
+  overflow: hidden;
+
+  max-width: 45%;
+}
+
+.datetime-text {
+  overflow: hidden;
+
+  flex: 1;
+
+  min-width: 16px;
+
+  font-size: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.datetime-disabled,
+.item-datetime-disabled ion-label {
+  opacity: .4;
+
+  pointer-events: none;
+}

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>