saturn-datepicker的beginDateSelectedChange触发异常重置问题

嘿，我来帮你搞定这个Saturn日历的小麻烦～你遇到的问题核心是：选中周之后再次点击周内日期，组件会重复触发beginDateSelectedChange事件，打乱原本的周选中逻辑。咱们可以通过维护选中周状态+判断点击日期范围来解决，具体步骤如下：

1. 新增状态记录已选中的周 #

在你的组件类里添加一个状态变量，用来存储当前已选中周的起始（周一）和结束（周日）日期：

selectedWeek: { start: Date; end: Date } | null = null;

2. 优化日期点击事件处理 #

在日历的日期点击回调里，先判断当前点击的日期是否在已选中的周范围内：

• 如果是已选中周内的日期，直接终止后续逻辑，避免触发不必要的事件；
• 如果不是，就计算该日期所在的周，更新选中状态并执行周选中逻辑。

示例代码：

onDateClick(date: Date, event?: MouseEvent) {
  // 判断当前日期是否在已选中的周内
  const isInSelectedWeek = this.selectedWeek && 
    date >= this.selectedWeek.start && 
    date <= this.selectedWeek.end;

  if (isInSelectedWeek) {
    // 阻止事件冒泡，避免触发组件内置的日期变更事件
    event?.stopPropagation();
    return;
  }

  // 计算当前日期对应的周一（起始）和周日（结束）
  // 这里用moment处理日期，本地环境需确保已引入moment依赖
  const startOfWeek = moment(date).startOf('isoWeek').toDate();
  const endOfWeek = moment(date).endOf('isoWeek').toDate();

  // 更新选中周状态
  this.selectedWeek = { start: startOfWeek, end: endOfWeek };

  // 这里执行你的周选中业务逻辑，比如更新日历的选中范围
  // 例如：this.calendarComponent.setSelectedRange(startOfWeek, endOfWeek);
}

3. 拦截beginDateSelectedChange事件的无效触发 #

在beginDateSelectedChange的回调里，同样判断选中的日期是否在已选中周内，如果是就直接返回，不处理这个变更：

onBeginDateSelectedChange(event: any) {
  const selectedDate = event.value;
  const isInSelectedWeek = this.selectedWeek && 
    selectedDate >= this.selectedWeek.start && 
    selectedDate <= this.selectedWeek.end;

  if (isInSelectedWeek) {
    // 属于已选中周内的日期，跳过此次变更处理
    return;
  }

  // 非选中周的日期，执行新的周选中逻辑（和onDateClick里的逻辑一致也可以）
  const startOfWeek = moment(selectedDate).startOf('isoWeek').toDate();
  const endOfWeek = moment(selectedDate).endOf('isoWeek').toDate();
  this.selectedWeek = { start: startOfWeek, end: endOfWeek };
  // ...其他业务逻辑
}

关键思路总结 #

通过维护selectedWeek状态，我们可以精准区分“首次选中周”和“点击已选中周内日期”两种场景，从而避免组件重复触发不必要的日期变更事件，保证周选中功能的稳定性。

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