Pro 时间选择器 ​

<template>
  <w-radio-group v-model="size" 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>
  <div class="flex flex-wrap gap-3">
    <div class="block">
      <span class="demonstration">默认</span>
      <w-time-picker-pro
        v-model="value1"
        :size="size"
        placeholder="请选择时间"
      />
    </div>
    <div class="block">
      <span class="demonstration">此刻：{{ value2 }}</span>
      <w-time-picker-pro
        v-model="value2"
        :size="size"
        now
        :default-value="new Date(2023, 9, 1, 10, 20, 30)"
        placeholder="请选择时间"
      />
    </div>
    <div class="block">
      <span class="demonstration">箭头控制</span>
      <w-time-picker-pro
        v-model="value3"
        :size="size"
        arrow-control
        placeholder="请选择时间"
      />
    </div>
    <div class="block">
      <span class="demonstration">轻量化</span>
      <w-time-picker-pro
        v-model="value4"
        :size="size"
        plain
        placeholder="请选择时间"
      />
    </div>
    <div class="block">
      <span class="demonstration">now + server-time</span>
      <w-time-picker-pro
        v-model="valueServer"
        :size="size"
        now
        server-time
        placeholder="请选择时间"
      />
    </div>
  </div>
</template>

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

const value1 = ref()
const value2 = ref()
const size = ref('default')
const value3 = ref('')
const value4 = ref('')
const valueServer = ref('')
</script>

<style scoped>
.block {
  padding-top: 12px;
  text-align: center;
}

.demonstration {
  display: block;
  color: var(--w3-font-color-second);
  font-size: 13px;
  margin-bottom: 8px;
}
</style>

<template>
  <div class="example-basic">
    <w-time-picker-pro
      v-model="value1"
      :disabled-hours="disabledHours"
      :disabled-minutes="disabledMinutes"
      :disabled-seconds="disabledSeconds"
      placeholder="请选择时间"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from '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)
  }
}
const disabledSeconds = (hour: number, minute: number) => {
  if (hour === 18 && minute === 30) {
    return makeRange(1, 59)
  }
}
</script>

<style>
.example-basic .w3-date-pro-editor {
  margin: 8px;
}
</style>

<template>
  <div class="flex flex-wrap gap-3">
    <div class="block">
      <span class="demonstration">默认</span>
      <w-time-picker-pro
        v-model="value1"
        is-range
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </div>
    <div class="block">
      <span class="demonstration">箭头控制</span>
      <w-time-picker-pro
        v-model="value2"
        is-range
        arrow-control
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </div>
    <div class="block">
      <span class="demonstration">快捷切换 toggle-range-date</span>
      <w-time-picker-pro
        v-model="valueToggle"
        is-range
        toggle-range-date
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from '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, 8, 40),
  new Date(2016, 9, 10, 9, 40),
])
const valueToggle = ref<[Date, Date]>([
  new Date(2016, 9, 10, 8, 40),
  new Date(2016, 9, 10, 9, 40),
])
</script>

<style scoped>
.block {
  padding-top: 12px;
  text-align: center;
}
.demonstration {
  display: block;
  color: var(--w3-font-color-second);
  font-size: 13px;
  margin-bottom: 8px;
}
</style>