引入组件

局部引入

// parent.vue
const FDatetime = defineAsyncComponent(() => import('@/components/formaui/f-datetime/f-datetime.vue'))

基础用法

通过 ref 调用 show 方法显示选择器，需在组件初始化完成后调用。

<f-button width="200rpx" margin="24rpx auto" @click="openPicker">选择日期时间</f-button>
<f-datetime ref="datetimeRef" :type="1" title="请选择" @confirm="onConfirm" />

<view v-if="result">选择结果：{{ result }}</view>

import { ref } from 'vue'
import type { FDatetimeConfirmDetail } from '@/components/formaui/f-datetime/types'

const datetimeRef = ref<{ show: () => void; hide: () => void } | null>(null)
const result = ref('')

const openPicker = () => {
  datetimeRef.value?.show()
}

const onConfirm = (detail: FDatetimeConfirmDetail) => {
  result.value = detail.result
  datetimeRef.value?.hide()
}

选择类型

type 属性：显示类型（默认 1）

值	说明
0	年
1	年月日 + 时分
2	年月日
3	年月
4	时分
5	时分秒
6	分秒
7	年月日 + 时分秒
8	年月日 + 小时

<f-datetime ref="datetimeRef" :type="2" @confirm="onConfirm" />

设置默认值

defaultValue 属性：默认显示日期，如 2019-08-01、2019-08-01 17:01、2019/08/01

<f-datetime ref="datetimeRef" :type="1" default-value="2019-08-01 17:01" @confirm="onConfirm" />

插槽

名称	说明
-	-

属性

名称	类型	说明	默认值
type	number	显示类型，见上方表格（0～8）	1
startYear	number	年份区间起始年	1940
endYear	number	年份区间结束年	2050
hoursData	number[]	小时可选区间，如 [15,20]，设置后默认区间失效	[]
minutesData	number[]	分钟可选区间，如 [15,30,45]	[]
secondsData	number[]	秒数可选区间，如 [0,30]	[]
title	string	标题	-
titleSize	string	标题字号	34rpx
titleColor	string	标题颜色	#0b1d4a
cancelText	string	取消按钮文字	取消
cancelColor	string	取消按钮颜色	#8d94a6
confirmText	string	确定按钮文字	确定
confirmColor	string	确定按钮颜色	#16479D
defaultValue	string	默认显示值	-
isUnitTop	boolean	单位是否置顶	false
isRadius	boolean	是否圆角	false
headerBgColor	string	头部背景色	#FFFFFF
bodyBgColor	string	选择器背景色	#FFFFFF
unitBgColor	string	单位条背景色（置顶时）	#FFFFFF
height	string	滚动区域高度	520rpx
closeOnClickMask	boolean	点击遮罩是否关闭并触发 cancel	true
zIndex	number	z-index	998

事件

事件名	说明	回调参数
confirm	点击确定时触发	FDatetimeConfirmDetail，含 result 及年月日时分秒字段
cancel	点击取消或点击遮罩关闭时触发	-

方法

方法名	说明	传入参数
show	显示日期时间选择器	-
hide	隐藏日期时间选择器	-