diff --git a/packages/core/src/components/datetime/datetime.tsx b/packages/core/src/components/datetime/datetime.tsx
index d85bda4188..a43a64c8df 100644
--- a/packages/core/src/components/datetime/datetime.tsx
+++ b/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
*/
diff --git a/packages/core/src/components/datetime/readme.md b/packages/core/src/components/datetime/readme.md
index bf35893e89..b369e737c0 100644
--- a/packages/core/src/components/datetime/readme.md
+++ b/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.
+
+
----------------------------------------------
diff --git a/packages/core/src/components/datetime/test/basic/index.html b/packages/core/src/components/datetime/test/basic/index.html
index f2401a3504..14ef76a239 100644
--- a/packages/core/src/components/datetime/test/basic/index.html
+++ b/packages/core/src/components/datetime/test/basic/index.html
@@ -27,21 +27,31 @@
+
+ Disabled
+
+
+
YYYY
- MMMM YY
+ MMMM YY
- MM/DD/YYYY
+ MM/DD/YYYY
+
+ MM/DD/YYYY
+
+
+
DDD. MMM DD, YY (custom locale)