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)