时间选择器 TimePicker

对应 Arco TimePicker：选中时间位于面板列的顶部。 属性用法见 Element Plus 文档。

基础选择

点击输入框选择时、分、秒。

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(new Date(2026, 9, 15, 9, 30, 0))
</script>

<template>
  <el-time-picker v-model="value" placeholder="Select a time" style="width: 240px" />
</template>

时间范围

is-range 将单个时间选择改为起止时间范围。

<script setup lang="ts">
import { ref } from 'vue'
const value = ref<[Date, Date]>([new Date(2026, 9, 15, 9), new Date(2026, 9, 15, 18)])
</script>

<template>
  <el-time-picker v-model="value" is-range range-separator="-" start-placeholder="Start time" end-placeholder="End time" style="width: 360px; max-width: 100%" />
</template>

与 Arco 的差异

• 底部操作保留 Element Plus 的 Cancel / OK，Arco 使用 Now / OK。