javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(datetime): emit the proper styles to item

Browse Source
This commit is contained in:
Brandy Carney
2018-02-08 12:30:47 -05:00
parent 7e4cb44878
commit e13f6a1692
3 changed files with 45 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/core/src/components/datetime/datetime.tsx
View File

@ -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
*/

5
packages/core/src/components/datetime/readme.md
View File

@ -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.
----------------------------------------------

14
packages/core/src/components/datetime/test/basic/index.html
View File

@ -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"