指定 max 和 min 时值发生变化的离子日期时间问题

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 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 上打开日期时间字段时，所有内容都显示正确：

但是，用户将年份更改为 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 事件。

请记住，您直接从

picker-column.js

修改

node_modules

文件，因此您的更改将在新安装中消失。

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

Answer 2

我删除了

min

和

max

属性，选择器工作得更好。在服务器端验证日期。