fix(datetime): add styling for datetime with different labels

fixes #6764

Author: brandyscarney

src/components.md.scss

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

src/components.wp.scss

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

src/components/datetime/datetime.md.scss

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

src/components/datetime/datetime.scss

@@ -6,8 +6,6 @@
 ion-datetime {
   display: flex;
   overflow: hidden;
-
-  max-width: 45%;
 }
 
 .datetime-text {
@@ -20,6 +18,9 @@ ion-datetime {
   font-size: inherit;
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  min-height: 1.2em;
+  line-height: 1.2;  
 }
 
 .datetime-disabled,
@@ -28,3 +29,9 @@ ion-datetime {
 
   pointer-events: none;
 }
+
+.item-label-stacked ion-datetime,
+.item-label-floating ion-datetime {
+  width: 100%;
+  padding-left: 0;
+}

src/components/datetime/datetime.ts

@@ -698,6 +698,15 @@ export class DateTime {
     return this._value;
   }
 
+  /**
+   * @private
+   */
+  checkHasValue(inputValue: any) {
+    if (this._item) {
+      this._item.setCssClass('input-has-value', !!(inputValue && inputValue !== ''));
+    }
+  }
+
   /**
    * @private
    */
@@ -766,6 +775,7 @@ export class DateTime {
     console.debug('datetime, writeValue', val);
     this.setValue(val);
     this.updateText();
+    this.checkHasValue(val);
   }
 
   /**
@@ -792,6 +802,7 @@ export class DateTime {
       console.debug('datetime, onChange', val);
       this.setValue(val);
       this.updateText();
+      this.checkHasValue(val);
 
       // convert DateTimeData value to iso datetime format
       fn(convertDataToISO(this._value));

src/components/datetime/datetime.wp.scss

@@ -0,0 +1,31 @@
+@import "../../globals.wp";
+@import "./datetime";
+
+// Windows DateTime
+// --------------------------------------------------
+
+$datetime-wp-min-width:           45% !default;
+
+$datetime-wp-padding-top:         $item-wp-padding-top !default;
+$datetime-wp-padding-right:       ($item-wp-padding-right / 2) !default;
+$datetime-wp-padding-bottom:      $item-wp-padding-bottom !default;
+$datetime-wp-padding-left:        $item-wp-padding-left !default;
+
+$datetime-wp-border-width:        2px !default;
+$datetime-wp-border-color:        $input-wp-border-color !default;
+
+ion-datetime {
+  padding: $datetime-wp-padding-top $datetime-wp-padding-right $datetime-wp-padding-bottom $datetime-wp-padding-left;
+  min-width: $datetime-wp-min-width;
+}
+
+.datetime-text {
+  border: $datetime-wp-border-width solid $datetime-wp-border-color;
+  line-height: 3rem;
+  min-height: 3.4rem;
+  padding: 0 8px;
+}
+
+.item-datetime ion-label[floating] {
+  transform: translate3d(8px, 41px, 0);
+}

src/components/datetime/test/labels/e2e.ts

@@ -0,0 +1,23 @@
+import {Component} from '@angular/core';
+import {ionicBootstrap} from '../../../../../src';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+class E2EPage {
+  stacked2 = '1994-12-15T13:47:20.789';
+  floating2 = '1995-04-15';
+  fixed2 = '2002-09-23T15:03:46.789';
+  inline2 = '2005-06-17T11:06Z';
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  root = E2EPage;
+}
+
+ionicBootstrap(E2EApp);

src/components/datetime/test/labels/index.ts

@@ -0,0 +1,47 @@
+<ion-toolbar>
+  <ion-title>Datetime</ion-title>
+</ion-toolbar>
+
+<ion-content class="outer-content">
+
+  <ion-item>
+    <ion-label stacked>Stacked</ion-label>
+    <ion-datetime [(ngModel)]="stacked1"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label stacked>Stacked</ion-label>
+    <ion-datetime [(ngModel)]="stacked2"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label floating>Floating</ion-label>
+    <ion-datetime displayFormat="MMMM YY" [(ngModel)]="floating1"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label floating>Floating</ion-label>
+    <ion-datetime displayFormat="D MMM YYYY"[(ngModel)]="floating2"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label fixed>Fixed</ion-label>
+    <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="fixed1"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label fixed>Fixed</ion-label>
+    <ion-datetime displayFormat="DDDD MMM D, YYYY" [(ngModel)]="fixed2"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Inline</ion-label>
+    <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="inline1"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Inline</ion-label>
+    <ion-datetime displayFormat="DDDD MMM D, YYYY" [(ngModel)]="inline2"></ion-datetime>
+  </ion-item>
+
+</ion-content>

src/components/datetime/test/labels/main.html

@@ -20,7 +20,8 @@ ion-label {
 // --------------------------------------------------
 
 .item-input ion-label,
-.item-select ion-label {
+.item-select ion-label,
+.item-datetime ion-label {
   color: $label-ios-text-color;
 }