Ionic v4 datepicker清除按钮？

Question

我正在尝试添加一个清除按钮来清除使用日期选择器设置的值。我已将 [pickerOptions]="customPickerOptionFrom" 添加到我的日期选择器和以下打字稿中。

  customPickerOptionFrom = {
    buttons: [{
      text: 'Clear',
      handler: () =>
        this.expirationDate = null
    }]
  }

这行得通，它设置了一个清除按钮....问题是所有其他按钮 [取消，完成] 然后消失了。有没有办法只添加这个额外的按钮？还是这种方法会覆盖所有按钮并强制我全部编程？

有效期：

customOptionsMfg: any = {
    buttons: [{
      text: 'Clear',
      handler: () =>
        this.productionDate = null
    }, {
      text: 'Cancel',
      role: 'cancel'
    },
    {
      text: 'Ok',
      handler: (data) => {
        this.productionDate = data.year.text + '-' + (data.month.value < 10 ? '0' + data.month.value.toString() : data.month.value.toString()) +
          + '-' + data.day.text
        console.log(this.productionDate);
      },
      role: 'ok'
    }]
  }

Answer 1

根据源代码，如果您传入任何按钮，那么您将对按钮和处理程序负全部责任。

这是来自generatePickerOptions() 方法的sn-p：

// If the user has not passed in picker buttons,
// add a cancel and ok button to the picker
const buttons = pickerOptions.buttons;
if (!buttons || buttons.length === 0) {
  pickerOptions.buttons = [
    {
      text: this.cancelText,
      role: 'cancel',
      handler: () => {
        this.updateDatetimeValue(this.value);
        this.ionCancel.emit();
      }
    },
    {
      text: this.doneText,
      handler: (data: any) => {
        this.updateDatetimeValue(data);

        /**
         * Prevent convertDataToISO from doing any
         * kind of transformation based on timezone
         * This cancels out any change it attempts to make
         *
         * Important: Take the timezone offset based on
         * the date that is currently selected, otherwise
         * there can be 1 hr difference when dealing w/ DST
         */
        const date = new Date(convertDataToISO(this.datetimeValue));
        this.datetimeValue.tzOffset = date.getTimezoneOffset() * -1;

        this.value = convertDataToISO(this.datetimeValue);
      }
    }
  ];
}

在我看来，如果你想提供自己的按钮，它会变得相当复杂，因为你不能只使用上面的这个 sn-p，它包含对私有方法的调用。

根据我正在阅读的内容，我很想在 Ionic 上打开一个错误，说该功能基本上无法使用。

除非我缺少一些理论？我不知道您是否可以编写一个处理程序，该处理程序就像它在类中的插槽一样工作，并且能够访问this 并获取内部方法。

实验

也许尝试将它们全部放在一起，看看它是否有效：

  customPickerOptionFrom = {
    buttons: [{
      text: 'Clear',
      handler: () =>
        this.expirationDate = null
    },
 {
      text: this.cancelText,
      role: 'cancel',
      handler: () => {
        this.updateDatetimeValue(this.value);
        this.ionCancel.emit();
      }
    },
    {
      text: this.doneText,
      handler: (data: any) => {
        this.updateDatetimeValue(data);

        /**
         * Prevent convertDataToISO from doing any
         * kind of transformation based on timezone
         * This cancels out any change it attempts to make
         *
         * Important: Take the timezone offset based on
         * the date that is currently selected, otherwise
         * there can be 1 hr difference when dealing w/ DST
         */
        const date = new Date(convertDataToISO(this.datetimeValue));
        this.datetimeValue.tzOffset = date.getTimezoneOffset() * -1;

        this.value = convertDataToISO(this.datetimeValue);
      }
    }
]
  }

Answer 2

如您所见，属性（按钮）是一个列表，因此您可以添加任意数量的项目，只需添加即可。

按钮：[

    {
      text: 'Cancel',
      role: 'cancel'
    },

{
  text: 'Clear',
  role: 'clear', // i don't know if putting this role will work
  handler: () =>
    this.expirationDate = null
},

    {
      text: 'Ok',
      role: 'ok'
    }
  ],

在 PickerOptions 之后添加这个

let picker = await this.pickerCtrl.create(opts);

picker.present();

picker.onDidDismiss().then(async data => {

  let num = await picker.getColumn('num');
    this.pickerData = num.options[num.selectedIndex].text;
    this.pickerDataPrevious = num.selectedIndex;

});