离子日期时间选择器动态更新列答案

【问题标题】：Ionic date time picker update columns dynamically离子日期时间选择器动态更新列
【发布时间】：2021-05-28 03:08:08
【问题描述】：

我有以下要求，旨在寻找类似的东西。

时间选择用户选择小时和分钟的位置。提供者的小时数可以是任何 (1,5,6,13,19) 等。每个小时都有自己的分钟这样的数据结构

[ 
  { 
    hour: 1,
    minutes: [0, 15, 30],
  },
  {
    hour: 4,
    minutes: [15, 25, 40],
  },
]

当用户选择小时时，分钟选择将根据结构而改变。

知道是否实现了这个或类似的东西以便我可以使用它吗？

【问题讨论】：

标签： angular ionic-framework ionic4 ionic5

【解决方案1】：

“官方”的回答是：不，这在当前版本的 Ionic (4/5) 中是不可能的。不可能的原因是ion-datetime 组件在列更改时不会发出事件（仅当用户单击“完成”或“取消”时）。

请注意，该更改有一个 Github issue，然后包含在 bigger Github issue 中，其中包含许多应修复/添加到 ion-datetime 选择器的内容。

还请注意，Ionic 团队的一名成员在 this comment 中提到，他们正在对 ion-datetime 组件进行全面检修，作为 Ionic 框架的下一个主要版本的一部分，因此可能很快就会推出。

话虽如此，在this PR 中，一个新的ionPickerColChange 事件被添加到日期时间选择器组件中但它在外部不可用（它不是由组件发出，仅在内部处理）。

但是，由于日期时间选择器组件并未隐藏在 Shadow DOM 后面，我们可以使用一些 javascript 代码作为解决方法来监听列中的变化并更新可用选项。

请记住，以下演示只是一种解决方法，因此它可能随时停止工作，并且可能会出现一些意外问题/错误。

请看一下这个working Stackblitz demo：

代码应该是不言自明的，但其中最重要的部分是 handlePickerOpen() 方法，它获取 ion-picker-column 元素并添加一个侦听器来处理用户更改小时/分钟列时发生的情况：

public handlePickerOpen(): void {
    // Keep the current value so we can rollback the change
    // if the user clicks "cancel"
    this.selectedDateTime = this.latestSelectedDateTime;

    // Wait for the picker to be rendered so that we can
    // get its columns
    setTimeout(() => {
      try {
        const pickerCols = document.querySelectorAll("ion-picker-column");

        const hourCol = pickerCols[0];
        const minuteCol = pickerCols[1];

        hourCol.addEventListener(
          "ionPickerColChange",
          event => { this.handleColumnChange(event); },
          false
        );

        minuteCol.addEventListener(
          "ionPickerColChange",
          event => { this.handleColumnChange(event); },
          false
        );
      } catch (e) {
        console.error(e);
      }
    }, 400);
  }

【讨论】：