Ionic 3 ion-формат отображения даты и времени без year ngModel будет пустым

#angular #datetime #ionic-framework #ionic3 #ngmodel

#угловатый #дата — время #ионный каркас #ionic3 #ngmodel #angular #datetime #ionic-framework

Вопрос:

Я создаю форму в приложении ionic 3 и ввожу дату рождения, используя ion-datetime. По какой-то причине конфиденциальности я не могу узнать год рождения людей. Но когда я устанавливаю формат ion-datetime с помощью DD MMMM. ngModel пуст, но когда у меня есть year, например, DD MMMM YYYY, он нормально получит пользовательский ввод. Могу ли я узнать, как это решить? ниже приведен мой код:

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

И стакблитц:

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

Комментарии:

1. Это должно сработать, можете ли вы создать проблему, воспроизводимую stackblitz?

2. stackblitz.com/edit/… Спасибо за ответ @SivakumarTadisetti

Ответ №1:

Это действительно очень странная проблема!

Я думаю, что проблема связана с этой строкой кода исходного кода 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.