为何WhatsApp Flows的CalendarPicker组件include-days无法设为动态值？

问题描述 #

开发WhatsApp Flow时，使用CalendarPicker组件需要动态限制可选日期（例如仅允许选择工作日），但在screen的data区域定义include_days为动态值后无法生效，组件渲染报错。静态配置["Mon", "Tue", "Wed", "Thu", "Fri"]可以正常工作，但需要实现动态配置。

尝试的配置片段：

"data": {
  "include_days": {
    "type": "array",
    "items": {
      "type": "string"
    },
    "__example__": ["Mon", "Tue", "Wed", "Thu", "Fri"]
  }
}

在CalendarPicker中引用：

"include-days": "${data.include_days}"

完整Flow配置示例：

{
  "routing_model": {
    "calendar_screen": []
  },
  "data_api_version": "3.0",
  "version": "6.2",
  "screens": [
    {
      "id": "calendar_screen",
      "title": "选择日期",
      "terminal": true,
      "data": {
        "min_date": {
          "type": "string",
          "__example__": "2024-12-01"
        },
        "max_date": {
          "type": "string",
          "__example__": "2025-12-31"
        },
        "unavailable_dates": {
          "type": "array",
          "items": {
            "type": "string"
          },
          "__example__": ["2024-12-25", "2025-01-01"]
        },
        "include_days": {
          "type": "array",
          "items": {
            "type": "string"
          },
          "__example__": ["Mon", "Tue", "Wed", "Thu", "Fri"]
        }
      },
      "layout": {
        "type": "SingleColumnLayout",
        "children": [
          {
            "type": "CalendarPicker",
            "name": "appointment_date",
            "label": "选择一个日期",
            "helper-text": "请选择可用日期。",
            "required": true,
            "mode": "single",
            "min-date": "${data.min_date}",
            "max-date": "${data.max_date}",
            "unavailable-dates": "${data.unavailable_dates}",
            "include-days": "${data.include_days}",
            "on-select-action": {
              "name": "data_exchange",
              "payload": {
                "appointment_date": "${form.appointment_date}"
              }
            }
          },
          {
            "type": "Footer",
            "label": "完成",
            "on-click-action": {
              "name": "complete",
              "payload": {}
            }
          }
        ]
      }
    }
  ]
}

问题原因 #

根据WhatsApp Flows组件的实际行为，include-days属性目前不支持动态数据绑定，仅接受静态数组值。而unavailable-dates、min-date、max-date等属性则支持动态绑定，这是组件实现上的限制。

解决方案 #

方案1：反向使用 unavailable-dates 动态排除非工作日 #

既然unavailable-dates支持动态绑定，可以在后端生成所有周末（Sat、Sun）对应的具体日期数组，传入到unavailable_dates中，实现仅允许选择工作日的效果：

1. 在Data Exchange接口中，根据min_date和max_date计算出该范围内所有周六、周日的日期，格式为YYYY-MM-DD。
2. 将计算结果赋值给unavailable_dates，组件会自动排除这些日期。

方案2：提前注入静态 include-days 数组 #

如果必须使用include-days，可以在Flow渲染前，通过Data Exchange接口直接将include-days的静态数组注入到screen的配置中，而不是通过${data.include_days}绑定：

• 在后端生成Flow配置时，根据业务逻辑动态替换include-days的值为目标数组（如["Mon", "Tue", "Wed", "Thu", "Fri"]）。

方案3：检查数据格式与大小写 #

确保动态传入的include_days数组元素是标准的英文星期缩写（Mon、Tue、Wed、Thu、Fri、Sat、Sun），大小写必须严格匹配，否则组件无法识别。

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