Shopify Date Picker自定义：按下单规则限制可取货日期范围

这套方案完全匹配你的接单、制作、取货流程，不需要重构你已经完成搭建的基础日期选择器功能，只需要调整核心的日期计算和禁用规则即可实现需求。

核心规则转可执行计算逻辑 #

先把你提的3条业务规则拆解成可被代码识别的判断标准，完全对齐你给出的示例：

• 最早取货日基础计算逻辑：找到距离当前下单日最近的下一个周一，作为初始的最早可选日期
• 特殊判断：如果下单当天是周日，跳过紧接在这个周日后面的周一，把最早可选日期再往后推7天（对应你周日下单、要等两周后周一才能取的规则）
• 通用禁用规则：所有日期的周日全部设为不可选

计算匹配校验（对应你给的示例） #

• 5月10日（周一）下单：最近的周一是5月17日，非周日下单，最早取货日为5月17日，符合要求
• 5月11日-15日（周二到周六）下单：最近的周一是5月17日，非周日下单，最早取货日统一为5月17日，符合要求
• 5月16日（周日）下单：最近的周一是5月17日，触发周日特殊判断，向后推7天，最早取货日为5月24日，符合要求
• 所有落在周日的日期，不管距离下单日远近，全部不可选

具体代码修改 #

1. 替换最早可选日期的计算逻辑 #

把原有代码里固定N天后可选的判断，替换成以下逻辑，注意先把日期对齐到当日零点，避免时分秒造成的日期偏差：

// 优先使用店铺设置的时区获取当前时间，避免用户本地时区带来的计算偏差
const now = new Date();
now.setHours(0, 0, 0, 0);
const currentWeekday = now.getDay(); // 取值0=周日，1=周一...6=周六

// 计算距离当前最近的下一个周一的偏移天数
const offsetToNextMonday = currentWeekday === 0 ? 1 : (8 - currentWeekday);
let earliestPickupDate = new Date(now);
earliestPickupDate.setDate(now.getDate() + offsetToNextMonday);

// 周日下单的特殊规则：最早可选日再向后推7天
if (currentWeekday === 0) {
  earliestPickupDate.setDate(earliestPickupDate.getDate() + 7);
}

2. 调整日期禁用判断函数 #

在原有禁用逻辑里增加两个判断分支：

function checkIfDateDisabled(targetDate) {
  // 规则1：早于最早可取货日期的全部禁用
  const compareDate = new Date(targetDate);
  compareDate.setHours(0, 0, 0, 0);
  if (compareDate < earliestPickupDate) return true;

  // 规则2：所有周日全部禁用
  if (targetDate.getDay() === 0) return true;

  // 其余日期全部可选
  return false;
}

落地注意事项 #

• 一定要做时区对齐：不要直接读取用户浏览器的本地时间判断当前星期几，要通过Shopify内置的店铺时区配置获取标准下单日期，否则跨地区用户访问时，会出现下单日判断错误、最早取货日算错的问题
• 可以在日期选择器上方增加一行提示文案，直接展示当前计算出的最早可取货日期，降低用户的选择困惑，比如“目前最早可预约5月24日（周一）取货，周日暂不开放取货”
• 这套逻辑完全自动匹配你的生产批次：周一到周六的订单会被自动归入当周周日的制作批次，对应下周一的取货窗口；周日的订单因为赶不上当天的制作流程，会自动归入下一周周日的制作批次，对应再下一周周一的取货窗口，不需要额外设置复杂的下单截止时间判断

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