TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
1015
4.2m

时间区间选择 xBetweenTime ​

在线预览
在线模拟尺寸:

介绍 ​

快速的时间区间选择器，方便时间选择自动判断前后时间大小并校正。

平台兼容 ​

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

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-between-time/x-between-time.uvue

使用 ​

ts

<x-between-time></x-between-time>

Props 属性 ​

名称说明类型默认值
modelValue当前时间,与modelStr不同，此提供的值必须是正常的时间格式
否则报错，无法运行。
Array() : string[] => [] as string[]
modelStr当前时间经过format格式化后输出的值。
此值不会处理输入，只输出显示。
string""
modelShow当前打开的状态。
等同v-model:model-show
booleanfalse
title顶部标题
空默认为：请选择时间（根据语言不同也不同）
如果你提供了值，组件内的多语言失效以你设定的为准
string""
start开始时间，请提供正确的时间格式
string""
end结束时间，请提供正确的时间格式
string""
type精确到的级别,这里只是展示，具体的返回值还是完整的值。
year:年
month:年月
day:年月日
hour:年月日小时
minute:年月日小时分钟
second:年月日小时分钟秒
ModelType"day"
format输出时间格式，只对v-model:modelStr及输入框展示有效YYYY-MM-DD，为空时由当前语文决定
因此它可能不是一个标准时间，比如YY SS ,所以不能作为modelValue使用
有效格式：
YYYY年
MM月
DD日
hh小时
mm分钟
ss秒
string""
cellUnits上方的单位名称
默认为：['年', '月', '日', '时', '分', '秒']
Array() : string[] => [] as string[]
quickDate快速时间区间选择，如果直接填写数字字符，会以你提供的数字最近多少来天来算。
d:本日
w:本周
m:本月
y:本年
q:本季度
7:最近7天，后面的依此类推，数字的就是最近xx天。
px:前x年，p+[x]数字依此类推，表示前x年,如：p1,p2...
如果提供以下json结构，则以你自定的为准。
UTSJSONObject:{title:'本学年',start:'2025-1-1',end:'2025-12-31'} as UTSJSONObject
Array() : Array<any> => ['d', 'w', 'm', 'y', 'q'] as Array<any>
lazyContent是否懒加载内部内容。
当前你的列表内容非常多，且影响打开的动画性能时，请务必
设置此项为true，以获得流畅视觉效果。如果选择数据较少没有必要打开
要兼容微信,必须设置为true,非微信可以为false
booleantrue
drawerSize如果你的快捷选择较多可能会让高度不足，需要自行设置下高。
string'540px'
disabledClear是否禁用清除按钮，默认不禁用，允许用户清空选择。点确认，以清空选项数据
booleanfalse
disabled是否禁用弹出
booleanfalse
widthCoverCenter宽屏时是否让内容剧中显示
并限制其宽为屏幕宽，只展示中间内容以适应宽屏。
booleantrue

Events 事件 ​

名称参数说明
cancel-取消时触发
confirmdate: string确认触发
changedate: string滑动变换时触发
dateClickitem: UTSJSONObject<{text:string,value:string[]}>快速日期被选中时触发
update:modelShow-变量控制打开状态
等同v-model:model-show
update:modelStr-经格式化后的值。等同v-model:model-str
update:modelValue--

Slots 插槽 ​

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

Ref 方法 ​

名称参数返回值说明
open--打开选择器 *
close--关闭选择器 *
clear--清空选择 *

示例文件路径 ​

json

/pages/biaodan/between-time

示例源码 ​

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">时间区间选择 xBetweenTime</x-text>
			<x-text color="#999999">快速的时间区间选择器，方便时间选择自动判断前后时间大小并校正。</x-text>
		</x-sheet>
		
		<x-sheet>
		
			<x-between-time start="2020-1-9" end="2026-5-26" v-model="newdata" v-model:model-str="nowVal">
				<template v-slot:default="{show}">
					<x-button :block="true">打开时间</x-button>
				</template>
			</x-between-time>

			<x-sheet :margin="['0','24']" color="#f5f5f5" dark-color="#333">
				<x-text color="#999999">选中的值：{{newdata}}</x-text>
				<x-text color="#999999">经format的值：{{nowVal}}</x-text>
			</x-sheet>
			<x-button skin='thin' :block="true" @click="newdata = ['2024-3-21','2026-1-13']">赋值</x-button>
		</x-sheet>
	
		<x-sheet>
			<x-text font-size="18" class="text-weight-b mb-20">设置快捷按钮</x-text>
			<x-between-time :quick-date="['d','y','7','30','p1','p2',customDate]" start="2020-1-9" end="2026-5-26" v-model="newdata" v-model:model-str="nowVal">
				<template v-slot:default="{show}">
					<x-button :block="true">打开时间</x-button>
				</template>
			</x-between-time>
		
		</x-sheet>
		
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	
	const nowVal = ref("")
	const newdata = ref<string[]>([])
	const customDate = ref<UTSJSONObject>({title:'本学年',start:'2025-1-1',end:'2025-12-31'})
</script>

<style lang="scss">

</style>
最近更新