V1.0.0
WinDesign A2UI Vue

WTimeSelect 组件 ​

时间选择组件，基于 WinDesignNext TimeSelect 封装，用于从固定时间点列表中选择时间（如 09:00–18:00，步长 30 分钟），适合预约时段等场景。

与 WTimePicker 的区别：WTimeSelect 从预生成的固定时间点列表中选择（通过 start、end、step 配置）；WTimePicker 提供滚轮/箭头式的任意时刻选择。绑定值均为 HH:mm 格式字符串。

基础用法 ​

Props API ​

属性名类型默认值说明
idstring-组件唯一标识（必填）
componentstringWTimeSelect组件类型（必填）
modelValueobject-绑定值（A2UI 数据绑定，支持 path）
startstring/object09:00可选时间范围起始（支持 path）
endstring/object18:00可选时间范围结束（支持 path）
stepstring/object00:30相邻选项时间间隔（支持 path）
minTimestring/object-最早可选时间点（支持 path）
maxTimestring/object-最晚可选时间点（支持 path）
formatstring/objectHH:mm时间显示格式（支持 path）
sizestringdefault输入框尺寸
disabledbooleanfalse是否禁用
editablebooleantrue文本框是否可输入
clearablebooleantrue是否可清空
includeEndTimebooleanfalse选项是否包含 end 时刻
placeholderstring-占位文本
namestring-原生 name 属性
effectstringlightTooltip 主题
prefixIconstring/object-前缀图标
clearIconstring/objectCircleCloseFilled清空图标
plainbooleanfalse朴素模式
actionobject-A2UI v0.9 事件定义

path 支持说明 ​

通用绑定格式见 path 数据绑定速查。

属性支持 path说明
modelValue✅双向绑定选中值（HH:mm 字符串）
format✅动态控制时间显示格式
start / end / step✅动态控制可选时间范围与步长
minTime / maxTime✅动态限制最早/最晚可选时间（可联动）
action.event.context[].value✅事件上下文可引用 dataModel
action.event.api.constParams[].value✅API 固定参数可引用 dataModel
placeholder / disabled / size 等❌静态配置

format / start / end / minTime 绑定示例：

json
{
  "start": { "path": "/slotStart" },
  "end": { "path": "/slotEnd" },
  "step": { "literalString": "00:30" },
  "minTime": { "path": "/startTime" },
  "format": { "path": "/timeFormat" },
  "modelValue": { "path": "/appointmentTime" }
}

选中开始时间后，通过 updateDataModel 更新 minTime 路径对应的值，结束时间选择器会自动限制可选范围：

json
{
  "version": "v0.9",
  "updateDataModel": {
    "surfaceId": "main",
    "path": "/startTime",
    "value": "10:00"
  }
}

modelValue 绑定规则：

  • 绑定值类型固定为 字符串（如 "09:30"），与 format 格式一致
  • 默认 format 为 HH:mm，不支持 Date 对象或时间戳
json
// path 绑定
{ "modelValue": { "path": "/appointmentTime" } }

// 初始值字面量
{ "modelValue": { "literalString": "09:30" } }

动态时间约束（minTime / maxTime）：

minTime 和 maxTime 支持 path 绑定，可直接引用 dataModel 中的值实现开始/结束时间联动，也可通过 updateDataModel 或 updateProp 动态更新：

json
{
  "id": "timeselect_end",
  "component": "WTimeSelect",
  "minTime": { "path": "/startTime" },
  "modelValue": { "path": "/endTime" }
}

modelValue 数据绑定 ​

json
{
  "id": "time_appointment",
  "component": "WTimeSelect",
  "start": "08:00",
  "end": "20:00",
  "step": "00:30",
  "placeholder": "请选择预约时间",
  "clearable": true,
  "modelValue": { "path": "/appointmentTime" },
  "action": {
    "event": {
      "name": "onAppointmentTimeChange",
      "context": [{ "key": "time", "value": { "path": "/appointmentTime" } }]
    }
  }
}

action 定义 ​

用户确认选定值时触发，默认 type 为 change。

json
{
  "action": {
    "event": {
      "name": "onTimeSelect",
      "type": "change",
      "context": [{ "key": "time", "value": { "path": "/appointmentTime" } }]
    }
  }
}

使用示例 ​

基础时间点选择 ​

json
{
  "id": "timeselect_001",
  "component": "WTimeSelect",
  "start": "09:00",
  "end": "18:00",
  "step": "00:30",
  "placeholder": "请选择时间",
  "clearable": true,
  "modelValue": { "path": "/appointmentTime" },
  "action": {
    "event": { "name": "onTimeSelect" }
  }
}

固定时间范围约束 ​

选中开始时间后，通过 minTime 限制结束时间的可选范围：

json
[
  {
    "id": "form_item_start",
    "component": "WFormItem",
    "label": "开始时间",
    "children": ["timeselect_start"]
  },
  {
    "id": "timeselect_start",
    "component": "WTimeSelect",
    "start": "08:00",
    "end": "20:00",
    "step": "00:30",
    "placeholder": "开始时间",
    "modelValue": { "path": "/startTime" },
    "action": {
      "event": {
        "name": "onStartTimeSelect",
        "context": [{ "key": "startTime", "value": { "path": "/startTime" } }]
      }
    }
  },
  {
    "id": "form_item_end",
    "component": "WFormItem",
    "label": "结束时间",
    "children": ["timeselect_end"]
  },
  {
    "id": "timeselect_end",
    "component": "WTimeSelect",
    "start": "08:00",
    "end": "20:00",
    "step": "00:30",
    "minTime": { "path": "/startTime" },
    "placeholder": "结束时间",
    "modelValue": { "path": "/endTime" },
    "action": {
      "event": { "name": "onEndTimeSelect" }
    }
  }
]

结束时间选择器的 minTime 通过 path 引用 /startTime，用户选择开始时间后 dataModel 自动更新，结束时间的可选范围随之联动，无需额外 updateProp。

配合 WForm 使用 ​

json
[
  {
    "id": "form_item_appointment",
    "component": "WFormItem",
    "label": "预约时段",
    "prop": "appointmentTime",
    "children": ["timeselect_appointment"]
  },
  {
    "id": "timeselect_appointment",
    "component": "WTimeSelect",
    "start": "08:00",
    "end": "17:00",
    "step": "00:30",
    "includeEndTime": true,
    "placeholder": "请选择",
    "clearable": true,
    "modelValue": { "path": "/appointmentTime" },
    "action": {
      "event": {
        "name": "onAppointmentChange",
        "context": [{ "key": "time", "value": { "path": "/appointmentTime" } }]
      }
    }
  }
]

配合 updateDataModel 设置初始值：

json
{
  "version": "v0.9",
  "updateDataModel": {
    "surfaceId": "main",
    "path": "/",
    "value": {
      "appointmentTime": "09:30"
    }
  }
}

事件处理 ​

选择变化事件 ​

typescript
processor.onEvent((event) => {
  const eventName = event.message.userAction?.name;
  const context = event.message.userAction?.context;

  if (eventName === 'onTimeSelect') {
    // context: { time: "09:30" }
    console.log('选中时间:', context);
    event.resolve([]);
  }
});

数据同步 ​

WTimeSelect 在用户选择后会自动将字符串值同步到 dataModel，可被 WForm 校验和 WButton 的 formParams 收集。

组件选型参考 ​

场景推荐组件
固定时间点列表（如预约时段）WTimeSelect
任意时刻选择（滚轮/箭头）WTimePicker
日期 + 时刻WDatePicker（type: "datetime"）
仅日期WDatePicker（type: "date"）

Design by UED