Ion-Datetime同时设置默认值与最小小时属性失效问题求助

问题描述 #

使用ion-datetime组件时，单独设置默认值或min属性均能正常工作，但同时设置两者时功能失效。相关业务代码如下：

if (this.page === 'destination') { //TIME DESTINATION
  const storedDate = format(new Date(this.form.get('date').value), 'yyyy-MM-dd\'T\'HH:mm');
  let maxDeliveryDate: any;
  this.transportService.deliveries.forEach(delivery => {
    const originStartDate = format(new Date(delivery.origin.slots[0].start), 'yyyy-MM-dd\'T\'HH:mm');
    if (!maxDeliveryDate || originStartDate > maxDeliveryDate) {
      maxDeliveryDate = originStartDate;
      const isSameday: boolean = format(new Date(storedDate), 'yyyy-MM-dd') === format(new Date(maxDeliveryDate), 'yyyy-MM-dd')
      //last date
      if(isSameday){
        //THIS PART BUG
        this.minVal = maxDeliveryDate;
        console.log('this.minVal: ', this.minVal); //2023-09-20T20:00
      } else {
        this.minVal = format(new Date(2000, 0, 1), 'yyyy-MM-dd\'T\'HH:mm')
      }

    }
  })
} else { //TIME ORIGIN
  if(format(new Date(), 'yyyy-MM-dd') === this.form.get('date').value){
    this.minVal = format(addHours(new Date(), 1), 'yyyy-MM-dd\'T\'HH:mm');
  } else {
    this.minVal = format(new Date(2000, 0, 1), 'yyyy-MM-dd\'T\'HH:mm');
  }
}

问题核心原因 #

1. 默认值违反min约束：当设置的minVal时间晚于组件默认值时，ion-datetime会因数据不合法出现功能异常；
2. 字符串日期比较存在误差：依赖格式化后的字符串做日期比较，可能因时区、格式细节偏差导致逻辑判断错误。

解决方案 #

1. 强制保证默认值 >= 最小值 #

设置minVal后，立即检查当前表单日期是否小于最小值，若不满足则同步更新默认值，确保数据合法性。

2. 用Date对象处理日期逻辑 #

直接操作Date对象进行比较和计算，避免格式化字符串带来的潜在问题。

修改后的关键代码示例：

if (this.page === 'destination') { //TIME DESTINATION
  const storedDateObj = new Date(this.form.get('date').value);
  let maxDeliveryDateObj: Date | null = null;
  
  this.transportService.deliveries.forEach(delivery => {
    const originStartDateObj = new Date(delivery.origin.slots[0].start);
    if (!maxDeliveryDateObj || originStartDateObj > maxDeliveryDateObj) {
      maxDeliveryDateObj = originStartDateObj;
      const isSameday = storedDateObj.toDateString() === maxDeliveryDateObj.toDateString();
      
      if(isSameday){
        this.minVal = format(maxDeliveryDateObj, 'yyyy-MM-dd\'T\'HH:mm');
        // 检查默认值是否小于最小值，若小于则更新
        if (storedDateObj < maxDeliveryDateObj) {
          this.form.get('date')?.setValue(this.minVal);
        }
      } else {
        this.minVal = format(new Date(2000, 0, 1), 'yyyy-MM-dd\'T\'HH:mm');
      }
    }
  })
} else { //TIME ORIGIN
  const currentDate = new Date();
  const formDateStr = this.form.get('date').value;
  const formDateObj = new Date(formDateStr);
  
  if(currentDate.toDateString() === formDateObj.toDateString()){
    const minDateObj = addHours(currentDate, 1);
    this.minVal = format(minDateObj, 'yyyy-MM-dd\'T\'HH:mm');
    // 检查默认值是否小于最小值
    if (formDateObj < minDateObj) {
      this.form.get('date')?.setValue(this.minVal);
    }
  } else {
    this.minVal = format(new Date(2000, 0, 1), 'yyyy-MM-dd\'T\'HH:mm');
  }
}

3. 模板绑定确认 #

确保ion-datetime的属性绑定无误：

<ion-datetime 
  [(ngModel)]="form.get('date').value" 
  [min]="minVal"
  displayFormat="YYYY-MM-DD HH:mm"
></ion-datetime>

内容的提问来源于stack exchange，提问作者orphen92300