Matches Arco TimePicker with selected values at the top of each panel column. See the Element Plus docs for props.
Click the input to select hours, minutes and seconds.
<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>Use is-range to select start and end times.
<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>