u

code/g3soft-libs/docs/examples/date/time-select.vue

@@ -0,0 +1,28 @@
+<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>