TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
837
3.5m

日期选择器 xPickerDate ​

在线预览
在线模拟尺寸:

介绍 ​

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

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

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

使用 ​

ts

<x-picker-date></x-picker-date>

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""
modelShow当前打开的状态。
等同v-model:model-show
booleanfalse
title顶部标题
string""
cancelText取消按钮的文本
string""
confirmText确认按钮的文本
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
booleanfalse
cellUnits上方的单位名称，'年', '月', '日', '时', '分', '秒'
string[]() : string[] => [] as string[]
lazyContent是否懒加载内部内容。
当前你的列表内容非常多，且影响打开的动画性能时，请务必
设置此项为true，以获得流畅视觉效果。如果选择数据较少没有必要打开
要兼容微信就必须打开为true,非微信可以设置为false
booleantrue
zIndex层级
number1100
showClose``
booleantrue
disabled是否禁用弹出
booleanfalse
widthCoverCenter宽屏时是否让内容剧中显示
并限制其宽为屏幕宽，只展示中间内容以适应宽屏。
booleanfalse

Events 事件 ​

名称参数说明
cancel-取消时触发
confirm-确认触发
changedate: string滑动变换时触发
update:modelShow-变量控制打开状态
等同v-model:model-show
update:modelStr-经格式化后的值。等同v-model:model-str
update:modelValue-点击确认时同步。等同v-model

Slots 插槽 ​

名称说明数据
default插槽,默认触发打开选择器。你的默认布局可以放置在这里。label: string

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/biaodan/picker-date

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #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="1925-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  ></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">
				<template v-slot:default="{label}">
					<x-button :block="true">打开时间</x-button>
				</template>
			</x-picker-date>
		</x-sheet>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

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

<style lang="scss">

</style>
最近更新