Skip to content
On this page

组件库文档 tmui.design

时间选择器 Time

Time 时间选择器时一个用于选择事件的组件,常用于事件预约等场景。事件选择器提供两个组件,分别是tm-time-picker 与 tm-time-view 二者分是弹出选择与页面嵌入选择两种使用方式。


🌶️ 时间选择器 Time 示例

查看模拟效果
示例模板
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="24" _class="font-weight-b" label="基础示例,更多见文档"></tm-text>
			<tm-divider></tm-divider>
			<tm-time-view></tm-time-view>
		</tm-sheet>

		<tm-time-picker :showDetail="{
				year:false,
				month:false,
				day:false,
				hour:true,
				minute:true,
				second:false
			}" v-model="dateTime" :defaultValue="dateTime" format='HH:mm' v-model:model-str="dateTimeStr"
			start="1949/6/15 00:00:00"
			end="2048/6/15 23:59:59"
			>
			<tm-cell title="时分" :right-text="dateTimeStr||'请选择'"></tm-cell>
		</tm-time-picker>


		<tm-cell @click="showdate=true" title="请选择时间" :right-text="dateStr||'请选择'"></tm-cell>


		<tm-time-picker :showDetail="{
				year:true,
				month:true,
				day:true,
				hour:true,
				minute:true,
				second:true
			}" v-model:show="showdate" v-model="dateSAva" :defaultValue="dateSAva" format='YYYY年MM月DD日'
			v-model:model-str="dateStr"></tm-time-picker>
		<tm-sheet>
			<tm-text :font-size="24" _class="font-weight-b" label="全部显示,更多请自行配置"></tm-text>
			<tm-text :font-size="24" _class="font-weight-b" label="[2022-5-23]被禁用无法选择"></tm-text>
			<tm-divider></tm-divider>
			<tm-time-view v-model="dateSAva" v-model:model-str="dateStr" format='YYYY年MM月DD日' :defaultValue="dateSAva"
				:disabledDate="['2022-5-23']" :showDetail="{
				year:true,
				month:true,
				day:true,
				hour:true,
				minute:true,
				second:true
			}"></tm-time-view>
		</tm-sheet>
	</tm-app>
</template>
<script lang="ts" setup>
	import { ref, computed } from "vue"
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import tmApp from "@/tmui/components/tm-app/tm-app.vue"
	import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
	import tmText from "@/tmui/components/tm-text/tm-text.vue"
	import tmTimeView from "@/tmui/components/tm-time-view/tm-time-view.vue"
	import tmTimePicker from "@/tmui/components/tm-time-picker/tm-time-picker.vue"
	import tmDivider from "@/tmui/components/tm-divider/tm-divider.vue"
	import tmCell from "@/tmui/components/tm-cell/tm-cell.vue"
	const dateStr = ref('')
	const dateSAva = ref("2014-6-15")
	const dateTime = ref("2014-6-15 15:00:00")
	const dateTimeStr = ref("")
	const showdate = ref(false)

	setTimeout(() => {
		dateSAva.value = "2016-4-2"
		console.log(dateSAva.value)
	}, 200);
</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 Time-view 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
heightNumber400组件高度
modelValueNumber / String / Date""动态返回时间戳。这是一个标准的时间,不管showDetail是如何设置都将不影响这里的输出
modelStrString""格式化后的时间,如:2022/12/31
defaultValueString / Number / Date""默认显示的时间,格式与modelValue相同
disabledDateNumber / String / Date""禁用时间,目前可禁用到天,即表示当预选内容与设置禁用时间相同时,则会禁止使用者选中,就算滑到了该位置,也会回弹到之前的时间
formatStringYYYY/MM/DD时间格式化形式,如:YYYY-MM-DD
showDetailObject见下方设置选择时间的精度,最小可到秒
showSuffixObject见下方日期的后缀
startNumber / String / Date2008/01/01 00:00:00选择器开始的日期
endNumber / String / Date""选择器结束的日期

showDetail:{year:true,month:true,day:true,hour:false,minute:false,second:false}

showSuffix:{year:'年',month:'月',day:'日',hour:'时',minute:'分',second:'秒'}

🌱 Time-picker 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
modelValueNumber / String / Date''动态返回时间戳。这是一个标准的时间,不管showDetail是如何设置都将不影响这里的输出
defaultValueNumber / String / Date''默认显示的时间,格式与modelValue相同
formatString"YYYY/MM/DD"时间格式化形式,如:YYYY-MM-DD
showDetailObject见上方设置选择时间的精度,最小可到秒
showSuffixObject见上方日期的后缀
startNumber / String / Date2008/01/01 00:00:00选择器开始的日期
endNumber / String / Date""选择器结束的日期
heightNumber700高度,单位rpx
colorString"primary"组件颜色
linearString/确认选择按钮的渐变背景方向,可选值有:left:右->左,right:左->右。top:下->上,bottom:上->下
linearDeepStringlight确认选择按钮的渐变背景颜色深浅,可选值有:light,dark,accent亮系渐变和深色渐变
btnRoundNumber3按钮圆角值
roundNumber12组件圆角值
titleString请选择时间标题提示语
disabledBooleanfalse当使用插槽占位触发显示时,打开禁用可阻止弹层显示,适合在表单内部使用

🌹 Time-view 事件

事件名参数返回数据描述
change/modelStr时间选择器值变化时返回当前 modelStr 值,注意,此值为格式化后的内容,如:2022/04/18

🌹 Time-picker 事件

事件名参数返回数据描述
change/modelStr时间选择器值变化时返回当前 modelStr 值,注意,此值为格式化后的内容,如:2022/04/18
confirm/modelValue点击选择按钮后返回modelValue值
cancel//选择器关闭触发
open//选择器打开触发

🌽 slot插槽

time-picker 默认default,可触发弹层的插槽占位内容,比如在里面布局按钮,输入框,点击这块内容可以直接显示弹层。

🥗 Time-view ref方法

方法名参数返回值描述
setNowtimedate:Number ,type:默认值为{year="year",month="month",day="date",hour="hour",minute="minute",second="second"},可不用赋值通过ref修改目标时间选择器的当前值
ts
import {getCurrentInstance} from "vue"
import tmUpload from "@/tmui/components/tm-upload/tm-upload.vue"
const {proxy} = getCurrentInstance();

😡 贡献者

Wicos