1. 引言：手动日期列表的局限性
在构建具有日期选择功能的表单时，我们经常会遇到需要限制用户只能选择特定日期的场景。例如，一个预约系统可能只允许用户每两周的某个特定星期几进行预约。最初的实现方式可能是在代码中手动列出所有可用的日期，形成一个静态的日期数组。
var enabledDays = ['05/22/2023', '06/05/2023', '06/19/2023', '07/03/2023', /* ... 更多日期 ... */]; // 然后在 beforeShowDay 回调中检查当前日期是否在此数组中
这种手动维护日期列表的方法存在显而易见的局限性：
- 维护成本高昂： 每当需要添加新的可用日期时，都必须手动修改代码。
- 容易出错： 手动输入日期容易导致格式错误或日期遗漏。
- 缺乏灵活性： 如果需要更改选择规则（例如，从每两周改为每周），则需要大量修改。
为了解决这些问题，我们需要一种程序化的方法，让日期选择器能够根据预设的规则动态地判断哪些日期是可用的。
2. 日期选择器核心：gform_datepicker_options_pre_init 与 beforeShowDay
许多日期选择器库都提供了丰富的配置选项和回调函数，允许开发者自定义其行为。在Gravity Forms等常见的表单构建工具中，gform.addFilter 结合 gform_datepicker_options_pre_init 过滤器是配置日期选择器的主要途径。
这个过滤器允许我们在日期选择器初始化之前修改其选项对象 (optionsObj)。其中一个非常重要的选项是 beforeShowDay。
-
beforeShowDay 回调函数： 这是一个关键的回调函数，它会在日期选择器渲染日历的每一天时被调用。它接收一个 date 对象作为参数，代表当前正在渲染的日期。该函数必须返回一个数组，数组的第一个元素是一个布尔值：
- true 表示该日期可被选中。
- false 表示该日期不可被选中。
- 数组的第二个和第三个元素可选，用于添加CSS类和工具提示。
我们的目标就是在这个 beforeShowDay 回调中，编写逻辑来判断当前日期是否符合“每两周的某个特定星期几”的规则。
3. 实现每两周日期选择的逻辑
要实现每两周选择特定日期的功能，核心思路是：设定一个固定的起始日期（作为循环的基准），然后对于日历中的每一个日期，判断它是否是起始日期之后每14天的对应星期几。
以下是具体的实现步骤和逻辑：
- 确定一个固定的起始日期 (startDate)： 这个日期是你的循环开始点，它必须是你希望可用的第一个日期，并且是目标星期几。例如，如果你希望每两周选择周一，那么 startDate 就应该设置为第一个可用的周一。
- 在 beforeShowDay 中获取当前正在评估的日期 (date)： 这是 beforeShowDay 回调函数自动提供的参数。
- 检查当前日期的星期几： 使用 date.getDay() 方法获取当前日期的星期几（0代表周日，1代表周一，以此类推）。确保它与你想要选择的星期几相匹配。
-
计算当前日期与起始日期之间的天数差： 为了确保计算的准确性，特别是避免时区和时间戳的影响，建议将日期转换为UTC时间进行比较。
- 将 date 和 startDate 都转换为其日期的午夜UTC时间戳。
- 计算两个时间戳之间的毫秒差。
- 将毫秒差转换为天数。
- 判断天数差是否为14的倍数： 如果天数差是14的倍数（包括0，当 date 等于 startDate 时），则表示该日期符合每两周的周期。
如果以上所有条件都满足（是目标星期几且天数差是14的倍数），则启用该日期；否则，禁用该日期。
4. 代码示例
以下是根据上述逻辑优化后的JavaScript代码，用于在Gravity Forms日期选择器中实现每两周选择周一的功能：
5. 注意事项与扩展
- 起始日期 (startDate) 的设定： startDate 是整个循环的基准点。它必须是你希望用户能选择的第一个日期，并且其星期几要与你目标选择的星期几一致。如果 startDate 不是周一，而你却检查 day === 1，那么即使天数差是14的倍数，该日期也不会被启用。
-
星期几的调整： 如果你需要选择周二，只需将 if (day === 1) 中的 1 改为 2。
- 周日: day === 0
- 周一: day === 1
- 周二: day === 2
- 周三: day === 3
- 周四: day === 4
- 周五: day === 5
- 周六: day === 6
-
间隔周期的调整： 如果需要将“每两周”改为其他周期，只需修改 diffDays % 14 === 0 中的 14。
- 每周：diffDays % 7 === 0
- 每三周：diffDays % 21 === 0
- 时区问题： 使用 Date.UTC() 来创建日期并计算差异，有助于减少客户端时区对日期计算结果的影响，确保在不同用户设备上行为一致。Math.round 用于处理可能因浮点数精度导致的微小差异。
- 性能考量： 这种程序化方法在渲染日历时，每次只对一个日期进行计算，效率较高，特别适用于长期或不确定结束日期的周期性选择。
- 最小可选日期 (minDate)： optionsObj.minDate = 0; 表示从今天开始可以选择。你可以将其设置为一个特定的日期字符串或 new Date() 对象来限制用户只能选择某个日期之后的日期。结合 diffDays >= 0 可以确保只启用起始日期或之后的符合条件的日期。
6. 总结
通过利用日期选择器的 beforeShowDay 回调函数，并结合简单的日期计算逻辑，我们成功地实现了在日期选择器中自动选择每两周特定日期的功能。这种程序化的方法不仅消除了手动维护日期列表的繁琐和潜在错误，还极大地增强了日期选择功能的灵活性和可维护性，使得系统能够轻松适应未来可能变化的业务规则。
