表单组件
时间区间选择 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>
🌶️ 兼容性
平台兼容
H5 | uniAPP | 小程序 | version |
---|---|---|---|
☑️ | ☑️ | ☑️ | ☑️ |
🌱 参数
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
modelValue | Array<string> | ():string[]=>[]asstring[] | 当前时间,与modelStr不同,此提供的值必须是正常的时间格式否则报错,无法运行。 |
modelStr | string | "" | 当前时间经过format格式化后输出的值。此值不会处理输入,只输出显示。 |
modelShow | boolean | false | 当前打开的状态。等同v-model:model-show |
title | string | "请选择时间" | 顶部标题 |
start | string | "" | 开始时间,请提供正确的时间格式 |
end | string | "" | 结束时间,请提供正确的时间格式 |
type | ModelType | "day" | 精确到的级别,这里只是展示,具体的返回值还是完整的值。year:年month:年月day:年月日hour:年月日小时minute:年月日小时分钟second:年月日小时分钟秒 |
format | string | "YYYY-MM-DD" | 输出时间格式,只对v-model:modelStr及输入框展示有效因此它可能不是一个标准时间,比如YYSS,所以不能作为modelValue使用有效格式:YYYY年MM月DD日hh小时mm分钟ss秒 |
cellUnits | string[] | ():string[]=>['年','月','日','时','分','秒']asstring[] | 上方的单位名称 |
quickDate | Array<string> | ():string[]=>['d','w','m','y','q']asstring[] | 快速时间区间选择,如果直接填写数字字符,会以你提供的数字最近多少来天来算。d:本日w:本周m:本月y:本年q:本季度7:最近7天,后面的依此类推,数字的就是最近xx天。 |
lazyContent | boolean | false | 是否懒加载内部内容。当前你的列表内容非常多,且影响打开的动画性能时,请务必设置此项为true,以获得流畅视觉效果。如果选择数据较少没有必要打开 |
drawerSize | string | '1020' | 如果你的快捷选择较多可能会让高度不足,需要自行设置下高。 |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
cancel | - | - | 取消时触发 |
confirm | 名称:date,当前选中时间, | - | 确认触发 |
change | 名称:date,当前选中时间, | - | 滑动变换时触发 |
update:modelShow | - | - | 变量控制打开状态 |
等同v-model:model-show | |||
update:modelStr | - | - | 经格式化后的值。等同v-model:model-str |
update:modelValue | - | - | - |
🌽 slot插槽
插槽名 | 数据 | 描述 |
---|---|---|
default | - | 插槽,默认触发打开选择器。你的默认布局可以放置在这里。 |
🥗 ref方法
方法名 | 参数 | 返回值 | 描述 |
---|