Skip to content
On this page
你当前查看的文档是tmui3.2.0(已不再支持NVUE)
[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

表单组件

时间区间选择 TmBetweenTime

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

🌶️ 示例

查看模拟效果
示例模板
vue
<template>
    <view>
        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-8 d-block">时间区间选择 xBetweenTime</tm-text>
            <tm-text color="#999999">快速的时间区间选择器,方便时间选择自动判断前后时间大小并校正。</tm-text>
        </tm-sheet>

        <tm-sheet>

            <tm-between-time start="2020-1-9" end="2026-5-26" v-model="newdata" v-model:model-str="nowVal">
                <tm-button :block="true">打开时间</tm-button>
            </tm-between-time>

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

        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mb-20 d-block">设置快捷按钮</tm-text>
            <tm-between-time :quick-date="['d', 'y', '7', '30']" start="2020-1-9" end="2026-5-26" v-model="newdata"
                v-model:model-str="nowVal">
                <tm-button :block="true">打开时间</tm-button>
            </tm-between-time>

        </tm-sheet>

    </view>
</template>

<script lang="ts" setup>
import { ref } from "vue"
const nowVal = ref("")
const newdata = ref<string[]>([])
</script>

<style lang="scss"></style>

🌶️ 兼容性

平台兼容

H5uniAPP小程序version
☑️☑️☑️☑️

🌱 参数

参数名类型默认值描述
modelValueArray<string>():string[]=>[]asstring[]当前时间,与modelStr不同,此提供的值必须是正常的时间格式否则报错,无法运行。
modelStrstring""当前时间经过format格式化后输出的值。此值不会处理输入,只输出显示。
modelShowbooleanfalse当前打开的状态。等同v-model:model-show
titlestring"请选择时间"顶部标题
startstring""开始时间,请提供正确的时间格式
endstring""结束时间,请提供正确的时间格式
typeModelType"day"精确到的级别,这里只是展示,具体的返回值还是完整的值。year:年month:年月day:年月日hour:年月日小时minute:年月日小时分钟second:年月日小时分钟秒
formatstring"YYYY-MM-DD"输出时间格式,只对v-model:modelStr及输入框展示有效因此它可能不是一个标准时间,比如YYSS,所以不能作为modelValue使用有效格式:YYYY年MM月DD日hh小时mm分钟ss秒
cellUnitsstring[]():string[]=>['年','月','日','时','分','秒']asstring[]上方的单位名称
quickDateArray<string>():string[]=>['d','w','m','y','q']asstring[]快速时间区间选择,如果直接填写数字字符,会以你提供的数字最近多少来天来算。d:本日w:本周m:本月y:本年q:本季度7:最近7天,后面的依此类推,数字的就是最近xx天。
lazyContentbooleanfalse是否懒加载内部内容。当前你的列表内容非常多,且影响打开的动画性能时,请务必设置此项为true,以获得流畅视觉效果。如果选择数据较少没有必要打开
drawerSizestring'1020'如果你的快捷选择较多可能会让高度不足,需要自行设置下高。

🌹 事件

事件名参数返回数据描述
cancel--取消时触发
confirm名称:date,当前选中时间,-确认触发
change名称:date,当前选中时间,-滑动变换时触发
update:modelShow--变量控制打开状态
等同v-model:model-show
update:modelStr--经格式化后的值。等同v-model:model-str
update:modelValue---

🌽 slot插槽

插槽名数据描述
default-插槽,默认触发打开选择器。你的默认布局可以放置在这里。

🥗 ref方法

方法名参数返回值描述