TimeSelect 时间选择 ​

<template>
  <w-radio-group v-model="size" class="flex mb-8" aria-label="size control">
    <w-radio-button value="large">large</w-radio-button>
    <w-radio-button value="default">default</w-radio-button>
    <w-radio-button value="small">small</w-radio-button>
    <w-radio-button value="mini">mini</w-radio-button>
  </w-radio-group>
  <w-time-select
    v-model="value"
    :size="size"
    style="width: 240px"
    start="08:30"
    step="00:15"
    end="18:30"
    placeholder="请选择时间"
  />
  <w-time-select
    v-model="value1"
    class="ml-8"
    :size="size"
    style="width: 240px"
    start="08:30"
    step="00:15"
    end="18:30"
    plain
    placeholder="请选择时间"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const size = ref('default')

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

<template>
  <w-time-select
    v-model="value"
    style="width: 240px"
    start="00:00"
    step="00:30"
    end="23:59"
    placeholder="请选择时间"
    format="hh:mm A"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

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

<template>
  <div class="demo-time-range">
    <w-time-select
      v-model="startTime"
      style="width: 240px"
      :max-time="endTime"
      class="mr-4"
      placeholder="开始时间"
      start="08:30"
      step="00:15"
      end="18:30"
    />
    <w-time-select
      v-model="endTime"
      :prefix-icon="Search"
      style="width: 240px"
      :min-time="startTime"
      placeholder="结束时间"
      start="08:30"
      step="00:15"
      end="18:30"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Search } from '@win-design-next/icons-vue'

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