Element-UI MCP Server

## TimePicker 时间选择器 用于选择或输入时间 ### 固定时间点 提供几个固定的时间点供用户选择 :::demo 使用 el-time-select 标签，分别通过`start`、`end`和`step`指定可选的起始时间、结束时间和步长 ```html <el-time-select v-model="value" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="选择时间"> </el-time-select> <script> export default { data() { return { value: '' }; } } </script> ``` ::: ### 任意时间点 可以选择任意时间 :::demo 使用 el-time-picker 标签，通过`selectableRange`限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开`arrow-control`属性则通过界面上的箭头进行选择。 ```html <template> <el-time-picker v-model="value1" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意时间点"> </el-time-picker> <el-time-picker arrow-control v-model="value2" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意时间点"> </el-time-picker> </template> <script> export default { data() { return { value1: new Date(2016, 9, 10, 18, 40), value2: new Date(2016, 9, 10, 18, 40) }; } } </script> ``` ::: ### 固定时间范围 若先选择开始时间，则结束时间内备选项的状态会随之改变 :::demo ```html <template> <el-time-select placeholder="起始时间" v-model="startTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"> </el-time-select> <el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"> </el-time-select> </template> <script> export default { data() { return { startTime: '', endTime: '' }; } } </script> ``` ::: ### 任意时间范围 可选择任意的时间范围 :::demo 添加`is-range`属性即可选择时间范围，同样支持`arrow-control`属性。 ```html <template> <el-time-picker is-range v-model="value1" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"> </el-time-picker> <el-time-picker is-range arrow-control v-model="value2" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"> </el-time-picker> </template> <script> export default { data() { return { value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)], value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)] }; } } </script> ``` ::: | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | start | 开始时间 | string | — | 09:00 | | end | 结束时间 | string | — | 18:00 | | step | 间隔时间 | string | — | 00:30 | | minTime | 最小时间，小于该时间的时间段将被禁用 | string | — | 00:00 | | maxTime | 最大时间，大于该时间的时间段将被禁用 | string | — | — | ### Time Picker Options | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | selectableRange | 可选时间段，例如`'18:30:00 - 20:30:00'`或者传入数组`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — | | format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss`，AM/PM `A` | 'HH:mm:ss' |