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

如何解决指定最大值和最小值时值改变的离子日期时间问题

我在我的项目中使用了 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.

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

解决方法

这是来自 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 事件也将在第一次修改某些选择器列时触发。

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

就我而言，我使用 Docker 和一个入口点来解决这种情况。我在 npm 安装完成后覆盖该文件。这只是一个想法;)

Check this SS for ionic info it's working fine in this cli and framework veriosn