WordPress Bricks Builder如何动态填充下拉选择框选项？

一、修复下拉框日期选项合并问题 #

原函数返回数组时，Bricks的{echo:}语法会将数组转为逗号分隔的字符串，导致所有日期合并成单个选项。需修改函数，返回Bricks下拉框支持的每行一个选项格式（格式为值|显示文本）：

function generate_date_options() {
    $date_options = '';

    // 生成未来6天的日期选项
    for ($i = 0; $i < 6; $i++) {
        $date_value = date('Y-m-d', strtotime("+$i days"));
        $date_label = date('F j, Y', strtotime("+$i days"));
        // 每个选项单独一行，采用「值|显示文本」格式
        $date_options .= $date_value . '|' . $date_label . "\n";
    }

    // 移除最后多余的换行，避免出现空选项
    return rtrim($date_options);
}

修改后依然用{echo: generate_date_options()}调用，Bricks会自动将每行解析为独立的下拉选项，值为Y-m-d格式的日期，显示为友好的January 1, 2024样式。

二、日期时间选择器限制未来6天范围 #

如果偏好使用日期选择器，可通过自定义JS限制可选日期范围：

1. 在Bricks后台进入「设置」→「自定义代码」→「自定义JavaScript」
2. 添加以下代码（替换#your-date-field-id为你的日期选择器字段ID）：

document.addEventListener('DOMContentLoaded', function() {
    const datePicker = document.querySelector('#your-date-field-id');
    if (!datePicker) return;

    // 设置最小可选日期为今天
    const today = new Date().toISOString().split('T')[0];
    // 设置最大可选日期为未来6天
    const maxDate = new Date();
    maxDate.setDate(maxDate.getDate() + 6);
    const maxDateStr = maxDate.toISOString().split('T')[0];

    // 为日期选择器添加范围限制属性
    datePicker.setAttribute('min', today);
    datePicker.setAttribute('max', maxDateStr);
});

保存后，日期选择器将仅允许选择今天至未来6天内的日期。

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