没有年份 ngModel 的 Ionic 3 ion-datetime 显示格式将空白答案

【问题标题】：Ionic 3 ion-datetime display format without year ngModel will blank没有年份 ngModel 的 Ionic 3 ion-datetime 显示格式将空白
【发布时间】：2020-12-23 13:52:18
【问题描述】：

我正在 ionic 3 应用程序中构建表单，并使用 ion-datetime 输入生日。出于某种隐私原因，我无法获取人们的出生年份。但是当我使用 DD MMMM 设置离子日期时间格式时。 ngModel 是空白的，但是当我有年份时，例如DD MMMM YYYY，它将正常获取用户输入。我可以知道如何解决吗？以下是我的代码：

<ion-datetime displayFormat="DD MMMM" [(ngModel)]="formData.birthday"></ion-datetime>

还有堆栈闪电战：

https://stackblitz.com/edit/ionic-9q3aas?file=pages%2Fabout%2Fabout.html

【问题讨论】：

它应该可以工作，你能创建问题可重现的堆栈闪电战吗？
stackblitz.com/edit/… 感谢@SivakumarTadisetti 的回复

标签： angular datetime ionic-framework ionic3 ngmodel

【解决方案1】：

这确实是一个很奇怪的问题！

我认为这个问题是因为 Ionic 源代码的this line of code：

_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 演示。

【讨论】：