时间选择器 ​

<template>
  <DemoBlock>
    <div class="demo-block__stack">
      <div class="demo-block__section">
        <span class="demo-block__caption">起床时间</span>
        <strong>选择单个时间点</strong>
        <el-time-picker v-model="value1" clearable placeholder="请选择时间" />
        <p>时间列表可纵向滚动，并在页脚完成确认。</p>
      </div>

      <div class="demo-block__section">
        <span class="demo-block__caption">睡眠模式开始</span>
        <strong>在强调清晰度时使用 24 小时制</strong>
        <el-time-picker
          v-model="value2"
          format="HH:mm"
          placeholder="请选择时间"
        />
        <p>第二个输入项展示了多个时间字段如何保持整齐堆叠。</p>
      </div>
    </div>
  </DemoBlock>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import DemoBlock from '../components/demo-block.vue'

const value1 = ref()
const value2 = ref()
</script>

<template>
  <DemoBlock>
    <div class="demo-block__section">
      <span class="demo-block__caption">可选时段</span>
      <strong>仅允许选择 17:30 至 18:30</strong>
      <el-time-picker
        v-model="value1"
        :disabled-hours="disabledHours"
        :disabled-minutes="disabledMinutes"
        :disabled-seconds="disabledSeconds"
        placeholder="请选择时间"
      />
      <p>超出范围的时间会在面板中直接禁用，避免提交无效值。</p>
    </div>
  </DemoBlock>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import DemoBlock from '../components/demo-block.vue'

const value1 = ref(new Date(2016, 9, 10, 18, 30))

const makeRange = (start: number, end: number) => {
  const result: number[] = []
  for (let i = start; i <= end; i++) {
    result.push(i)
  }
  return result
}
const disabledHours = () => {
  return makeRange(0, 16).concat(makeRange(19, 23))
}
const disabledMinutes = (hour: number) => {
  if (hour === 17) {
    return makeRange(0, 29)
  }
  if (hour === 18) {
    return makeRange(31, 59)
  }
  return []
}
const disabledSeconds = (hour: number, minute: number) => {
  if (hour === 18 && minute === 30) {
    return makeRange(1, 59)
  }
  return []
}
</script>

<template>
  <DemoBlock>
    <div class="demo-block__stack">
      <div class="demo-block__section">
        <span class="demo-block__caption">工作班次</span>
        <strong>选择开始时间与结束时间</strong>
        <el-time-picker
          v-model="value1"
          is-range
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
        <p>两个端点会始终保持在同一组视觉区域中，更便于快速浏览。</p>
      </div>

      <div class="demo-block__section">
        <span class="demo-block__caption">客服时段</span>
        <strong>通过第二组范围管理其他时间安排</strong>
        <el-time-picker
          v-model="value2"
          is-range
          format="HH:mm"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
        <p>在编辑可用时段时，24 小时制通常会更清晰。</p>
      </div>
    </div>
  </DemoBlock>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import DemoBlock from '../components/demo-block.vue'

const value1 = ref<[Date, Date]>([
  new Date(2016, 9, 10, 8, 40),
  new Date(2016, 9, 10, 9, 40),
])
const value2 = ref<[Date, Date]>([
  new Date(2016, 9, 10, 10, 0),
  new Date(2016, 9, 10, 18, 0),
])
</script>