指定最大值和最小值时值发生变化的离子日期时间问题

Question

我在我的项目中使用 ion-datetime，这里有一些关于 Ionic 版本的信息：

Ionic:

   Ionic CLI          : 5.4.16
   Ionic Framework    : ionic-angular 3.9.5
   @ionic/app-scripts : 3.2.2

这是我的 ion-datetime 的示例：

 <ion-datetime displayFormat="DD-MM-YYYY" pickerFormat="DD MM YYYY" min="{{minDate}}" max=" {{maxDate}}"
        [(ngModel)]="model"
        cancelText="{{'cancel' | translate}}"
        doneText="{{'done' | translate}}"></ion-datetime>

最大值始终设置为当前日期，最小值设置为当前日期到半年前：

this.maxDate=moment().format('YYYY-MM-DD'); //e.g. maxDate=10.05.2021
this.minDate=moment().subtract(6, 'month')  //e.g. minDate=01.11.2020
      .startOf('month')
      .format('YYYY-MM-DD');

当用户在 UI 上打开 DateTime 字段时，一切都正确显示：

但是，用户将年份更改为 2020 年这一天，月份保持在之前的值：

将年份返回到上一个 2021 年，然后再次更改为 2020 后，日期和月份正在更新：

在控制台中我有一个错误，但用户可以毫无问题地滚动它，并且稍后在应用程序中处理所选值：

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

如何解决上述错误并解决此日期时间选择器问题？

Answer 1

这是来自 Ionic V3 ion-datetime 组件的错误，我发现该问题从未得到修复。

预期行为： 当用户从选择器列更改日期值时，必须始终触发 ionChange 事件以更新其余的选择器列。

当前行为：当用户从选择器列更改日期值时，第一次不会触发 ionChange 事件。

解决方案：打开文件node_modules/ionic-angular/components/picker/picker-column.js并搜索第297行。您将看到：

297 if (emitChange) {
298   if (this.lastIndex === undefined) {
299     // have not set a last index yet
300     this.lastIndex = this.col.selectedIndex;
301   }
302   else if (this.lastIndex !== this.col.selectedIndex) {
...

删除第 298、299、300 和 301 行。同时从第 302 行删除 else 属性并保存文件。

编辑后的文件必须如下所示：

297 if (emitChange) {
298   if (this.lastIndex !== this.col.selectedIndex) {
...

现在，ionChange 事件也将在第一次修改某些选择器列时触发。

记住您直接从node_modules 修改picker-column.js 文件，因此您的更改将在新安装时消失。

在我的例子中，我使用 Docker 和一个入口点来解决这个场景。在 npm 安装完成后，我会覆盖该文件。这只是一个想法；）