32 lines
1.0 KiB
Vue
32 lines
1.0 KiB
Vue
<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>
|