嵌入式日期选择器 xDateView

---

预览

介绍

内嵌日期选择，可以控制显示精确到秒。默认的开始时间为当前时间的上一年，结束时间为默认当前时间 使用时，建议不要显示过多年份以防卡太多数据。

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-date-view/x-date-view.uvue

使用

<x-date-view></x-date-view>

Props 属性

名称	说明	类型	默认值
modelValue	当前时间,与modelStr不同，此提供的值必须是正常的时间格式 否则报错，无法运行。可以提供以下合法格式： YYYY,YYYY-MM,YYYY-MM-DD,YYYY-MM-DD HH,YYYY-MM-DD HH:mm,YYYY-MM-DD HH:mm:ss	string	""
modelStr	当前时间经过format格式化后输出的值。 此值不会处理输入，只输出显示。	string	""
title	顶部标题	string	"请选择时间"
start	开始时间，请提供正确的时间格式	string	""
end	结束时间，请提供正确的时间格式	string	""
type	精确到的级别 year:年 month:年月 day:年月日 hour:年月日小时 minute:年月日小时分钟 second:年月日小时分钟秒	ModelType	"day"
format	输出时间格式，只对v-model:modelStr有效 如果桢同步对vmodel:modelValue有效需要设置formatSyncValue为true 有效格式： YYYY年 MM月 DD日 hh小时 mm分钟 ss秒	string	"YYYY-MM-DD"
formatSyncValue	是否将format格式化的v-model:modelStr同步到v-model:modelValue 默认false,注意：如果开启了同步，你要确保format的值是正常的时间值 正常兼容以下时间格式： YYYY,YYYY-MM,YYYY-MM-DD,YYYY-MM-DD HH,YYYY-MM-DD HH:mm,YYYY-MM-DD HH:mm:ss	boolean	false
cellUnits	上方的单位名称,'年', '月', '日', '时', '分', '秒'	string[]	() : string[] => [] as string[]

Events 事件

名称	参数	说明
change	date: string	滑动变换时触发
update:modelStr	-	经格式化后的值。等同v-model:model-str
update:modelValue	-	-

Slots 插槽

名称	说明	数据

Ref 方法

名称	参数	返回值	说明
resync	-	-	-

示例文件路径

/pages/biaodan/picker-date

示例源码

uvue

<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor"
			:front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	<x-sheet>
		<x-text font-size="18" class=" text-weight-b mb-8">日期选择器 PickerDate</x-text>
		<x-text color="#999999">日期选择，可以控制显示精确到秒。默认的开始时间为当前时间的上一年，结束时间为默认当前时间</x-text>
	</x-sheet>


	<x-sheet>
		<x-picker-date v-model="modelValue" :formatSyncValue="true" start="2020-1-1" end="2025-12-5"
			v-model:model-str="nowVal" type="minute" format="YYYY-MM-DD hh:mm">
			<template v-slot:default="{label}">
				<x-button :block="true">打开时间</x-button>
			</template>
		</x-picker-date>

		<x-sheet :margin="['0','24','0','0']" color="#f5f5f5" dark-color="#333">
			<x-text color="#999999">选中的值：{{modelValue}}</x-text>
			<x-text color="#999999">经format的值：{{nowVal}}</x-text>
		</x-sheet>
	</x-sheet>
	<x-sheet>
		<x-button skin='thin' :block="true" @click="modelValue = '2024-3-21'">赋值2024-3-21</x-button>
	</x-sheet>

	<x-sheet>
		<x-text font-size="18" class=" text-weight-b mb-8">内嵌日期选择器 xDateView</x-text>
		<x-date-view v-model="modelValue2" start="2020-3-12" end="2025-10-5"></x-date-view>
	</x-sheet>

	<x-sheet>
		<x-text font-size="18" class=" text-weight-b">精确到秒</x-text>
	</x-sheet>
	<x-sheet>
		<x-picker-date type="second" v-model="modelValue3" start="2020-1-1" end="2025-12-5">
			<template v-slot:default="{label}">
				<x-button :block="true">打开时间</x-button>
			</template>
		</x-picker-date>
	</x-sheet>

</template>

<script setup lang="ts">
	const nowVal = ref("")
	const modelValue = ref("2024-10-06 10:10:10")
	const modelValue2 = ref("2025-4-22 10:10:10")
	const modelValue3 = ref("2024-10-06 10:10:10")
</script>

<style lang="scss">

</style>