时间选择 ​

<template>
  <DemoBlock>
    <div class="demo-block__stack">
      <div class="demo-block__section">
        <span class="demo-block__caption">提货时段</span>
        <strong>从固定排班中直接选择</strong>
        <el-time-select
          v-model="value"
          end="18:30"
          placeholder="请选择时间"
          start="08:30"
          step="00:15"
        />
        <p>当业务只支持固定时段时，固定时段选择器会比自由时间输入更清晰。</p>
      </div>
    </div>
  </DemoBlock>
</template>

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

const value = ref('')
</script>

<template>
  <DemoBlock>
    <div class="demo-block__section">
      <span class="demo-block__caption">中文格式</span>
      <strong>把固定时段格式化为更符合页面语境的文本</strong>
      <el-time-select
        v-model="value"
        start="00:00"
        step="00:30"
        end="23:59"
        placeholder="请选择时间"
        format="HH[时]mm[分]"
      />
      <p>当页面整体是中文内容时，时间格式也应和页面语言保持一致。</p>
    </div>
  </DemoBlock>
</template>

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

const value = ref('')
</script>

<template>
  <DemoBlock>
    <div class="demo-block__stack">
      <div class="demo-block__section">
        <span class="demo-block__caption">开始时间</span>
        <strong>结束时间会随着开始时间自动收窄可选范围</strong>
        <el-time-select
          v-model="startTime"
          :max-time="endTime"
          placeholder="开始时间"
          start="08:30"
          step="00:15"
          end="18:30"
        />
      </div>

      <div class="demo-block__section">
        <span class="demo-block__caption">结束时间</span>
        <strong>不能早于开始时间，避免生成错误时段</strong>
        <el-time-select
          v-model="endTime"
          :min-time="startTime"
          placeholder="结束时间"
          start="08:30"
          step="00:15"
          end="18:30"
        />
      </div>
    </div>
  </DemoBlock>
</template>

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

const startTime = ref('')
const endTime = ref('')
</script>