u

code/g3soft-libs/docs/examples/date/date-basic.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// 最基础：v-model 绑字符串（默认格式 YYYY-MM-DD），可直接手输或点选
+import { ref } from 'vue'
+import { G3DatePicker } from '@g3soft/ui'
+
+const date = ref('')
+</script>
+
+<template>
+  <div style="width: 240px">
+    <G3DatePicker v-model="date" placeholder="选择日期" />
+    <p style="margin: 8px 0 0; font-size: 13px; color: #6b7280">绑定值：{{ date || '（空）' }}</p>
+  </div>
+</template>

code/g3soft-libs/docs/examples/date/date-disabled.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// disabledDate 禁用日期；clearable 提供清除按钮；timeDefault 控制无值时的默认时间
+import { ref } from 'vue'
+import { G3DatePicker, G3Space } from '@g3soft/ui'
+
+const future = ref('')
+const locked = ref('2026-10-31 23:59:59')
+
+// 只能选今天之后（含今天）
+function disabledPast(date: Date) {
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+  return date.getTime() < today.getTime()
+}
+
+// 禁用周末
+function disabledWeekend(date: Date) {
+  return date.getDay() === 0 || date.getDay() === 6
+}
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="12" style="display: flex; width: 280px">
+    <G3DatePicker v-model="future" :disabled-date="disabledPast" placeholder="只能选今天及以后" />
+
+    <G3DatePicker
+      v-model="future"
+      :disabled-date="disabledWeekend"
+      format="YYYY-MM-DD HH:mm"
+      time-default="end"
+      placeholder="只能选工作日，默认 23:59"
+    />
+
+    <G3DatePicker v-model="locked" disabled placeholder="禁用态" />
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/date/date-format.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+// format 决定面板粒度与展示格式；valueFormat 决定绑定值格式（不传时跟随 format）
+import { ref } from 'vue'
+import { G3DatePicker, G3Space } from '@g3soft/ui'
+
+const year = ref('')
+const month = ref('')
+const dateTime = ref('')
+const precise = ref('')
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="12" style="display: flex; width: 280px">
+    <!-- 只选年份 -->
+    <G3DatePicker v-model="year" format="YYYY" placeholder="选择年份" />
+
+    <!-- 只选到月 -->
+    <G3DatePicker v-model="month" format="YYYY-MM" placeholder="选择月份" />
+
+    <!-- 日期 + 时分：面板底部出现时间列与「确定」按钮 -->
+    <G3DatePicker v-model="dateTime" format="YYYY-MM-DD HH:mm" placeholder="选择日期时间" />
+
+    <!-- 展示到分钟，但绑定值精确到秒 -->
+    <G3DatePicker
+      v-model="precise"
+      format="YYYY-MM-DD HH:mm"
+      value-format="YYYY-MM-DD HH:mm:ss"
+      placeholder="展示分钟 / 绑定秒"
+    />
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/date/manual-input.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+// 手输容错：非法输入不会污染绑定值（红框 1.5 秒后回填已提交值）
+// 光标停在年/月/日/时/分段上按 ↑↓ 可以微调该段
+import { ref } from 'vue'
+import { G3DatePicker, G3Space } from '@g3soft/ui'
+
+const date = ref('2026-10-08 09:30')
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="12" style="display: flex; width: 300px">
+    <G3DatePicker v-model="date" format="YYYY-MM-DD HH:mm" placeholder="试试手输 2026-13-45 看效果" />
+
+    <p style="margin: 0; font-size: 12px; color: #6b7280; line-height: 1.7">
+      支持的输入：<code>2026-10-08</code>、<code>2026/10/08</code>、<code>2026年10月8日</code>、
+      <code>2026-10-08 09:30</code>。部分输入（如只写 <code>2026-10</code>）会被补全。
+    </p>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/date/range-basic.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// RangePicker：两次点击确定起止；先点的那次是起点，再点一次是终点（顺序反了会自动交换）
+import { ref } from 'vue'
+import { G3RangePicker } from '@g3soft/ui'
+
+const range = ref<string[]>(['', ''])
+const lastChange = ref('暂无')
+</script>
+
+<template>
+  <div style="width: 320px">
+    <G3RangePicker
+      v-model="range"
+      @change="(value: string[]) => (lastChange = value.join(' ~ '))"
+    />
+    <p style="margin: 8px 0 0; font-size: 13px; color: #6b7280">
+      绑定值：{{ range[0] || '（空）' }} ~ {{ range[1] || '（空）' }}
+    </p>
+    <p style="margin: 4px 0 0; font-size: 12px; color: #6b7280">change：{{ lastChange }}</p>
+  </div>
+</template>

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>