fix(datetime): emit the proper styles to item

packages/core/src/components/datetime/datetime.tsx

@@ -52,6 +52,11 @@ export class Datetime {
    */
   @Prop() disabled = false;
 
+  @Watch('disabled')
+  protected disabledChanged() {
+    this.emitStyle();
+  }
+
   /**
    * The minimum datetime allowed. Value must be a date string
    * following the
@@ -197,6 +202,7 @@ export class Datetime {
   @Watch('value')
   protected valueChanged() {
     this.updateValue();
+    this.emitStyle();
   }
 
   /**
@@ -204,6 +210,12 @@ export class Datetime {
    */
   @Event() ionCancel: EventEmitter;
 
+  /**
+   * Emitted when the styles change.
+   */
+  @Event() ionStyle: EventEmitter;
+
+
   componentWillLoad() {
     // first see if locale names were provided in the inputs
     // then check to see if they're in the config
@@ -219,6 +231,22 @@ export class Datetime {
     this.updateValue();
   }
 
+  componentDidLoad() {
+    this.emitStyle();
+  }
+
+  emitStyle() {
+    clearTimeout(this.styleTmr);
+
+    this.styleTmr = setTimeout(() => {
+      this.ionStyle.emit({
+        'datetime': true,
+        'datetime-disabled': this.disabled,
+        'input-has-value': this.hasValue()
+      });
+    });
+  }
+
   /**
    * Update the datetime text and datetime value
    */

packages/core/src/components/datetime/readme.md

@@ -582,6 +582,11 @@ recent leap years, then this input's value would be `yearValues="2024,2020,2016,
 Emitted when the datetime selection was cancelled.
 
 
+#### ionStyle
+
+Emitted when the styles change.
+
+
 
 ----------------------------------------------
 

packages/core/src/components/datetime/test/basic/index.html

@@ -27,21 +27,31 @@
             <ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>
           </ion-item>
 
+          <ion-item>
+            <ion-label>Disabled</ion-label>
+            <ion-datetime display-format="MM DD YY" disabled value="1994-12-15"></ion-datetime>
+          </ion-item>
+
           <ion-item>
             <ion-label>YYYY</ion-label>
             <ion-datetime id="customPickerOptions" placeholder="Custom Options" display-format="YYYY" min="1981" max="2002"></ion-datetime>
           </ion-item>
 
           <ion-item>
-            <ion-label>MMMM YY</ion-label>
+            <ion-label stacked>MMMM YY</ion-label>
             <ion-datetime display-format="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
           </ion-item>
 
           <ion-item>
-            <ion-label>MM/DD/YYYY</ion-label>
+            <ion-label floating>MM/DD/YYYY</ion-label>
             <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789" class="e2eOpenMMDDYYYY"></ion-datetime>
           </ion-item>
 
+          <ion-item>
+            <ion-label floating>MM/DD/YYYY</ion-label>
+            <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" class="e2eOpenMMDDYYYY"></ion-datetime>
+          </ion-item>
+
           <ion-item>
             <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
             <ion-datetime id="customDayShortNames" value="1995-04-15" min="1990-02" max="2000"