1. 问题背景与挑战
在开发过程中，我们经常会遇到需要限制用户在日期选择器中选择特定日期的场景。例如，一个预订系统可能只允许用户预订每两周的某个特定日期。手动列举这些日期（如'05/22/2023', '06/05/2023', '06/19/2023'等）虽然可行，但存在显而易见的弊端：
- 维护成本高昂： 每增加一个周期，都需要手动添加新的日期。
- 缺乏灵活性： 如果起始日期或周期规则发生变化，需要修改大量代码。
- 易出错： 手动计算和输入日期容易引入错误。
因此，我们需要一种动态、自动化的方法来生成和校验这些周期性日期。
2. 核心逻辑：动态计算周期性日期
要实现日期选择器自动选中每两周的特定日期，我们需要以下核心逻辑：
- 确定一个起始日期： 这是我们计算周期性日期的基准点。
- 获取当前日期选择器中正在评估的日期： 在日期选择器的beforeShowDay回调函数中，会传入一个date对象，代表当前正在渲染的日历单元格的日期。
- 计算两个日期之间的天数差： 将当前日期与起始日期进行比较，得出它们之间相隔的天数。
-
应用周期性规则：
- 检查天数差是否为14的倍数（即两周）。
- 同时，检查当前日期的星期几是否符合我们预设的星期几（例如，星期一）。
只有当以上两个条件都满足时，该日期才会被启用。
3. 集成到日期选择器 (以Gravity Forms为例)
我们将以Gravity Forms的gform_datepicker_options_pre_init过滤器为例，演示如何将上述逻辑集成到日期选择器的配置中。此过滤器允许我们在初始化日期选择器之前修改其选项，其中beforeShowDay是关键的回调函数。
4. 代码解析
- gform.addFilter(...): 这是Gravity Forms提供的一个JavaScript钩子，用于在日期选择器初始化前修改其配置。
- formId == 3 && fieldId == 45: 这是一个条件判断，确保我们只针对特定的表单（ID为3）和字段（ID为45）应用此逻辑，避免影响其他日期选择器。
- optionsObj.minDate = 0;: 设置日期选择器允许选择的最小日期为今天。
- const startDateString = '2023-05-22'; / const startDate = new Date(startDateString);: 定义了周期性日期的起始点。这里我们选择了2023年5月22日，这是一个星期一。请根据您的实际需求修改此日期。建议使用YYYY-MM-DD格式的字符串来创建Date对象，以提高浏览器兼容性。
- const targetDayOfWeek = 1;: 定义了我们希望选中的是星期几。JavaScript中，getDay()方法返回0表示星期日，1表示星期一，以此类推。
-
optionsObj.beforeShowDay = function(date) { ... };: 这是核心逻辑所在。date参数是日期选择器当前正在渲染的日历单元格的Date对象。
- const currentDayOfWeek = date.getDay();: 获取当前单元格的星期几。
- if (currentDayOfWeek !== targetDayOfWeek) { return [false, '']; }: 首先判断当前日期是否是我们期望的星期几。如果不是，直接返回[false, '']，表示禁用该日期。
- const diffTime = Math.abs(date.getTime() - startDate.getTime());: 计算当前日期与起始日期之间的时间差，以毫秒为单位。Math.abs()确保我们得到正值，无论date是在startDate之前还是之后。
- *`const diffDays = Math.ceil(diffTime / (1000 60 60 24));**: 将毫秒差转换为天数。Math.ceil()`用于处理夏令时等可能导致不足一天的毫秒差，确保我们得到正确的天数间隔。
- const isTwoWeekInterval = (diffDays % 14 === 0);: 这是判断是否为两周间隔的关键。如果天数差是14的倍数，则说明符合两周的周期。
- return [isTwoWeekInterval, ''];: beforeShowDay函数必须返回一个数组。数组的第一个元素是布尔值，true表示启用该日期，false表示禁用。第二个元素是可选的CSS类名，第三个元素是可选的提示文本。
5. 注意事项与扩展
- 起始日期的选择： startDate是整个周期的基准。请确保您选择的startDate是您希望用户能够选择的第一个有效日期，并且其星期几与targetDayOfWeek匹配。
- 时区问题： JavaScript的Date对象在处理时区时可能比较复杂。上述代码在计算天数差时，如果startDate和date跨越了夏令时边界，或者客户端与服务器时区不一致，可能会有微小的偏差。对于精确的日期计算，建议使用Moment.js或date-fns等日期库，或者确保所有日期都转换为UTC进行比较。
- 周期调整： 如果您需要每N周选择一次，只需将代码中的14替换为N * 7即可。
- 多日选择： 如果您需要在一个周期内选择多个特定日期（例如，每两周的星期一和星期三），可以在beforeShowDay函数中添加更多targetDayOfWeek的判断，或者使用一个数组来存储多个目标星期几。
- 性能考量： 对于极长的时间范围，beforeShowDay函数会在每次渲染日历时对每个日期进行计算。通常情况下，这种计算量可以忽略不计，但如果页面性能成为瓶颈，可以考虑预先计算好一部分日期并缓存。
6. 总结
通过上述动态计算方法，我们成功地解决了日期选择器中周期性日期手动列举的问题。这种方法不仅减少了代码量，提高了可维护性，还使得日期选择逻辑更加灵活和自动化。无论是开发预订系统、排班工具还是其他需要周期性日期选择的应用，掌握这种动态配置技巧都将大大提升开发效率和应用质量。
