没有年份 ngModel 的离子 3 离子日期时间显示格式将空白
Ionic 3 ion-datetime display format without year ngModel will blank
我正在 ionic 3 应用程序中构建表单,并使用 ion-datetime 输入生日。出于某些隐私原因,我无法得知此人的出生年份。但是当我用 DD MMMM 设置 ion-datetime 格式时。 ngModel 是空白的,但是当我有年份时DD MMMM YYYY,会正常获取用户输入。我可以知道如何解决吗?下面是我的代码:
<ion-datetime displayFormat="DD MMMM" [(ngModel)]="formData.birthday"></ion-datetime>
还有 stackblitz:
https://stackblitz.com/edit/ionic-9q3aas?file=pages%2Fabout%2Fabout.html
这确实是一个很奇怪的问题!
我认为这个问题是因为 this line of code Ionic 的源代码:
_inputNgModelEvent(): any {
return convertDataToISO(this.value);
}
似乎 Ionic 正在尝试将所选值转换为 ISO 日期,但如果年份不存在,则它不是有效的 ISO 日期。一种解决方法是直接收听 ionChange
事件,如下所示:
<ion-header>
<ion-navbar>
<ion-title>
Test
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label>Value</ion-label>
<ion-datetime
displayFormat="DD MMMM"
(ionChange)="updateValues($event)" <--- here!
></ion-datetime>
</ion-item>
<ion-item>
<button ion-button (click)="printValues()">Show Result in Console</button>
</ion-item>
</ion-content>
然后在您的组件代码中,您可以处理该事件以获取所选值:
import { Component } from '@angular/core';
@Component({
selector: 'page-test',
templateUrl: 'test.html'
})
export class TestPage {
public day: number;
public month: number;
updateValues(values: any) {
if(values) {
this.day = values.day;
this.month = values.month;
}
}
printValues() {
console.log(`day: ${this.day}`);
console.log(`month: ${this.month}`);
}
}
请查看更新后的 stackblitz 演示。
我正在 ionic 3 应用程序中构建表单,并使用 ion-datetime 输入生日。出于某些隐私原因,我无法得知此人的出生年份。但是当我用 DD MMMM 设置 ion-datetime 格式时。 ngModel 是空白的,但是当我有年份时DD MMMM YYYY,会正常获取用户输入。我可以知道如何解决吗?下面是我的代码:
<ion-datetime displayFormat="DD MMMM" [(ngModel)]="formData.birthday"></ion-datetime>
还有 stackblitz:
https://stackblitz.com/edit/ionic-9q3aas?file=pages%2Fabout%2Fabout.html
这确实是一个很奇怪的问题!
我认为这个问题是因为 this line of code Ionic 的源代码:
_inputNgModelEvent(): any {
return convertDataToISO(this.value);
}
似乎 Ionic 正在尝试将所选值转换为 ISO 日期,但如果年份不存在,则它不是有效的 ISO 日期。一种解决方法是直接收听 ionChange
事件,如下所示:
<ion-header>
<ion-navbar>
<ion-title>
Test
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label>Value</ion-label>
<ion-datetime
displayFormat="DD MMMM"
(ionChange)="updateValues($event)" <--- here!
></ion-datetime>
</ion-item>
<ion-item>
<button ion-button (click)="printValues()">Show Result in Console</button>
</ion-item>
</ion-content>
然后在您的组件代码中,您可以处理该事件以获取所选值:
import { Component } from '@angular/core';
@Component({
selector: 'page-test',
templateUrl: 'test.html'
})
export class TestPage {
public day: number;
public month: number;
updateValues(values: any) {
if(values) {
this.day = values.day;
this.month = values.month;
}
}
printValues() {
console.log(`day: ${this.day}`);
console.log(`month: ${this.month}`);
}
}
请查看更新后的 stackblitz 演示。