概述：动态日期选择器的必要性
在构建包含日期选择功能的Web表单时，我们经常遇到需要限制用户只能选择特定日期的情况。例如，一个预订系统可能只允许用户每两周的某个特定日期进行预约。手动列出所有符合条件的日期不仅效率低下，而且难以维护，尤其当日期范围很长时。本教程将展示如何利用JavaScript的强大功能，动态计算并启用这些特定日期，从而提高代码的灵活性和可维护性。
理解 gform_datepicker_options_pre_init 过滤器与 beforeShowDay
Gravity Forms的日期选择器是基于jQuery UI Datepicker实现的。它提供了一个名为gform_datepicker_options_pre_init的JavaScript过滤器，允许开发者在日期选择器初始化之前修改其选项。这个过滤器接收三个参数：optionsObj（日期选择器选项对象）、formId（表单ID）和fieldId（字段ID）。
在optionsObj中，beforeShowDay是一个关键的回调函数。它在日期选择器显示日历的每一天时被调用，并接收一个Date对象作为参数。此函数必须返回一个数组，其第一个元素是一个布尔值，指示该日期是否可选（true为可选，false为不可选）。第二个元素是可选的CSS类名，第三个元素是可选的提示文本。
原始代码示例中通过硬编码enabledDays数组来限制可选日期，这正是我们需要优化的部分。
动态生成每两周日期的逻辑
要实现每两周选择一次日期的功能，我们需要以下步骤：
- 确定起始日期： 选择一个作为基准的日期，所有后续的每两周日期都将从此日期开始计算。
- 确定周期： 明确是每两周（14天）。
- 计算并存储日期： 从起始日期开始，以14天为间隔，向前或向后计算并生成一系列日期。
- 格式化日期： 将生成的日期格式化为与日期选择器内部比较时一致的字符串格式（例如 mm/dd/yy）。
示例代码：动态生成并应用日期
以下是优化后的JavaScript代码，它将动态生成从指定起始日期开始的每两周的周一（或任何指定星期几）的日期，并将其应用于Gravity Forms的日期选择器：
<script type="text/javascript">
gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
// 确保只应用于特定的表单和字段
if ( formId == 3 && fieldId == 45 ) {
optionsObj.minDate = 0; // 允许从今天开始选择
// 定义起始日期和可选的星期几
// 假设我们从2023年5月22日（一个周一）开始计算
var startDate = new Date('2023-05-22T00:00:00'); // 使用ISO格式确保时区问题最小化
var targetDayOfWeek = 1; // 0=Sunday, 1=Monday, ..., 6=Saturday
var intervalWeeks = 2; // 每两周
// 预生成一个未来一年的可用日期列表（可根据需要调整范围）
var enabledDaysMap = {}; // 使用对象（哈希表）存储日期，以便快速查找
var oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
var oneWeek = 7 * oneDay; // 一周的毫秒数
var twoWeeks = intervalWeeks * oneWeek; // 两周的毫秒数
// 生成未来一年的可选日期
for (var i = 0; i < 26; i++) { // 26 * 2周 = 52周 (一年)
var nextDate = new Date(startDate.getTime() + i * twoWeeks);
// 确保生成的日期是目标星期几 (如果startDate不是目标星期几，需要额外调整)
// 简单起见，我们假设startDate已经是目标星期几，或者我们只关心间隔
// 如果需要严格确保，可以加入逻辑：
// while (nextDate.getDay() !== targetDayOfWeek) {
// nextDate.setDate(nextDate.getDate() + 1);
// }
var formattedDate = jQuery.datepicker.formatDate('mm/dd/yy', nextDate);
enabledDaysMap[formattedDate] = true; // 将日期作为键存储
}
optionsObj.beforeShowDay = function(date) {
var currentDateFormatted = jQuery.datepicker.formatDate('mm/dd/yy', date);
// 检查当前日期是否在预生成的enabledDaysMap中
var isEnabled = enabledDaysMap.hasOwnProperty(currentDateFormatted);
return [isEnabled];
};
}
return optionsObj;
} );
</script>代码解析与注意事项
- startDate: 这是计算每两周日期的基准。请根据您的实际需求设置正确的起始日期。使用 new Date('YYYY-MM-DDTHH:MM:SS') 格式可以更好地避免时区问题。
- targetDayOfWeek: 如果您希望严格限制只有某个特定星期几的日期可选（例如只选周一），可以设置此变量。在示例中，我们假设startDate已经是一个周一，并且我们希望每两周的这个周一可选。
- intervalWeeks: 定义了日期的间隔，这里设置为 2 表示每两周。您可以根据需要修改为其他数字。
- enabledDaysMap: 我们使用一个JavaScript对象（哈希表）来存储可用的日期。相比于数组的indexOf方法，使用哈希表进行hasOwnProperty查找的效率更高，尤其当可选日期数量非常大时。
-
日期生成循环:
- oneDay, oneWeek, twoWeeks：定义了时间单位的毫秒数，方便进行日期计算。
- 循环 i
- new Date(startDate.getTime() + i * twoWeeks)：这是核心的日期计算逻辑，通过在起始日期的毫秒时间戳上加上每两周的毫秒数来得到下一个可选日期。
-
beforeShowDay 函数:
- jQuery.datepicker.formatDate('mm/dd/yy', date)：将日期选择器传入的Date对象格式化为 mm/dd/yy 字符串，以便与 enabledDaysMap 中的键进行匹配。
- enabledDaysMap.hasOwnProperty(currentDateFormatted)：检查当前日期是否在预生成的可用日期列表中。
- return [isEnabled]：返回一个数组，指示当前日期是否可选。
进一步的优化与考量
- 动态起始日期: 如果起始日期需要从后端获取或根据用户选择动态确定，您可以在gform_datepicker_options_pre_init外部或内部通过AJAX请求获取。
- 日期范围限制: 可以结合optionsObj.minDate和optionsObj.maxDate来进一步限制用户可以选择的日期范围。
- 性能: 对于需要生成非常多（例如未来五年）的日期时，预生成所有日期可能会导致页面加载时略微延迟。对于大多数应用场景，预生成一年或两年内的日期通常是可接受的。
- 用户体验: 可以考虑在日期选择器旁边添加说明文字，告知用户可选日期的规律。
- 错误处理: 确保startDate是有效的日期对象。
总结
通过动态生成日期列表并结合beforeShowDay回调函数，我们成功地将日期选择器从手动维护的日期列表转变为一个智能、自动化的解决方案。这种方法不仅提高了代码的可维护性和灵活性，也为用户提供了更加精确和受控的日期选择体验。掌握这种动态日期处理技术，对于开发复杂的表单和预订系统至关重要。
