29 lines
942 B
Vue
29 lines
942 B
Vue
<script setup lang="ts">
|
||
// TimeSelect：时 / 分 / 秒三列滚轮；12 小时制会追加 am/pm 列
|
||
import { ref } from 'vue'
|
||
import { G3Space, G3TimeSelect } from '@g3soft/ui'
|
||
|
||
const time = ref<Date | null>(null)
|
||
const time12 = ref<Date | null>(null)
|
||
const hourOnly = ref<Date | null>(null)
|
||
</script>
|
||
|
||
<template>
|
||
<G3Space :size="[24, 12]" wrap align="start">
|
||
<div>
|
||
<p style="margin: 0 0 6px; font-size: 12px; color: #6b7280">24 小时制（时/分/秒）</p>
|
||
<G3TimeSelect v-model="time" />
|
||
</div>
|
||
|
||
<div>
|
||
<p style="margin: 0 0 6px; font-size: 12px; color: #6b7280">12 小时制 + 小写 am/pm</p>
|
||
<G3TimeSelect v-model="time12" :hour12="true" :lower-meridiem="true" :fields="['hour', 'minute']" />
|
||
</div>
|
||
|
||
<div>
|
||
<p style="margin: 0 0 6px; font-size: 12px; color: #6b7280">只要小时</p>
|
||
<G3TimeSelect v-model="hourOnly" :fields="['hour']" />
|
||
</div>
|
||
</G3Space>
|
||
</template>
|