# 日期时间组件选型（优先 Pro）

> B 端新页面 **一律优先 Pro 系列**；非 Pro 仅维护存量代码，AI 生成代码 **禁止** 默认选用。

## 选型表

| 场景                   | 优先组件                  | 说明                                                   |
| ---------------------- | ------------------------- | ------------------------------------------------------ |
| 日期                   | `w-date-picker-pro`       | `type="date"`                                          |
| 日期范围               | `w-date-picker-pro`       | `type="daterange"`                                     |
| 月份 / 年 / 周         | `w-date-picker-pro`       | `type="month"` / `year` / `week`                       |
| 日期时间               | `w-date-picker-pro`       | `type="datetime"`（**勿用** `w-datetime-picker`）      |
| 日期时间范围           | `w-date-picker-pro`       | `type="datetimerange"`（**勿用** `w-datetime-picker`） |
| 时间                   | `w-time-picker-pro`       | **勿用** `w-time-picker`                               |
| 嵌入式日期面板         | `w-date-picker-panel-pro` | **勿用** `w-date-picker-panel`                         |
| 固定时间点（预约时段） | `w-time-select`           | 无 Pro 版，可保留                                      |

## 禁止（新生成代码）

| 错误                  | 正确                                    |
| --------------------- | --------------------------------------- |
| `w-date-picker`       | `w-date-picker-pro`                     |
| `w-datetime-picker`   | `w-date-picker-pro` + `type="datetime"` |
| `w-time-picker`       | `w-time-picker-pro`                     |
| `w-date-picker-panel` | `w-date-picker-panel-pro`               |

## API 查阅

- 日期 / 日期时间 / 范围：[date-picker-pro.md](components/by-name/date-picker-pro.md)
- 时间：[time-picker-pro.md](components/by-name/time-picker-pro.md)
- 嵌入式面板：[date-picker-panel-pro.md](components/by-name/date-picker-panel-pro.md)

## 表单示例

```vue
<w-form-item label="出生日期" prop="birthday">
  <w-date-picker-pro v-model="form.birthday" type="date" placeholder="请选择" />
</w-form-item>

<w-form-item label="就诊时间" prop="visitAt">
  <w-date-picker-pro v-model="form.visitAt" type="datetime" placeholder="请选择" />
</w-form-item>

<w-form-item label="时段" prop="slot">
  <w-time-picker-pro v-model="form.slot" placeholder="请选择" />
</w-form-item>
```

查询区范围：

```vue
<w-date-picker-pro
  v-model="query.range"
  type="daterange"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
/>
```
