Wix中Dropdown无法关联CMS日期时间字段的解决方案咨询

以下是几个可行的解决办法：

1. 手动动态加载日期选项到Dropdown #

直接通过代码从CMS集合拉取日期数据，转换为Dropdown支持的选项格式后填充，完全绕过编辑器的绑定限制：

import wixData from 'wix-data';

$w.onReady(async function () {
    // 查询目标CMS集合的日期数据，替换为你的集合名称
    const queryResults = await wixData.query("你的集合名称")
        .find();
    
    // 将datetime字段转换为Dropdown可识别的选项结构，自定义日期显示格式
    const dateOptions = queryResults.items.map(item => {
        const targetDate = item.你的日期字段名;
        return {
            label: targetDate.toLocaleDateString("zh-CN"), // 按中文格式显示日期（如2024/05/20）
            value: targetDate.toISOString() // 存储标准ISO格式日期，方便后续存回CMS
        };
    });
    
    // 给Dropdown组件设置选项
    $w("#你的Dropdown组件ID").options = dateOptions;
});

选择完成后，可通过$w("#你的Dropdown组件ID").value获取选中的日期值，再更新到CMS数据集中。

2. 改用DatePicker组件替代Dropdown #

Wix的DatePicker组件原生支持绑定datetime类型字段，若需要限制用户只能选择集合中存在的日期，可添加验证逻辑：

import wixData from 'wix-data';

let validDateList = [];

$w.onReady(async function () {
    // 预加载集合中的所有有效日期
    const results = await wixData.query("你的集合名称")
        .find();
    validDateList = results.items.map(item => item.你的日期字段名.toISOString().split('T')[0]);
    
    // 直接绑定DatePicker到CMS的datetime字段（编辑器可视化绑定也可）
    $w("#你的DatePicker组件ID").value = $w("#你的数据集ID").getCurrentItem().你的日期字段名;
});

// 选择日期时验证是否在集合的有效日期范围内
export function datePicker1_change(event) {
    const selectedDateStr = event.target.value.toISOString().split('T')[0];
    if (!validDateList.includes(selectedDateStr)) {
        $w("#你的DatePicker组件ID").value = null;
        $w("#错误提示文本ID").text = "请选择集合中存在的日期";
    } else {
        $w("#错误提示文本ID").text = "";
        // 将选中日期更新到数据集
        $w("#你的数据集ID").setFieldValue("你的日期字段名", event.target.value);
    }
}

3. 在CMS中新增同步文本字段 #

如果一定要使用Dropdown，可在CMS集合中新增一个文本字段，通过触发器自动同步datetime字段的文本格式：

1. 在目标CMS集合中添加一个文本类型字段（如命名为dateText）
2. 进入集合的「触发器」选项卡，创建「创建时」和「更新时」的触发器，添加以下代码：

import wixData from 'wix-data';

// 新增条目时同步日期到文本字段
export function 你的集合名称_beforeInsert(item) {
    item.dateText = item.你的日期字段名.toLocaleDateString("zh-CN");
    return item;
}

// 更新条目时同步日期到文本字段
export function 你的集合名称_beforeUpdate(item, originalItem) {
    item.dateText = item.你的日期字段名.toLocaleDateString("zh-CN");
    return item;
}

3. 返回编辑器，将Dropdown组件关联到这个dateText字段，即可正常选择；若需要将选中的文本日期存回datetime字段，可在Dropdown的onChange事件中把文本转换为Date对象后更新数据集。

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