Tui Plus Vapor

Appearance

# t-select-date

SelectDate 日期选择

t-select-date 组件介绍 ​

t-select-date 是日期选择组件，用于日期选择与结果展示，支持年月日时分秒的选择，可嵌入页面或弹窗模式使用。

t-select-date 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-select-date 基础用法 ​

基础用法参考 demo/picker-date/picker-date.uvue，通过 v-model 绑定选中的日期。

vue
<template>
  <view class="p-15">
    <tui-theme-switch></tui-theme-switch>
    <t-card class="mb-15"
            title="PickerDate 日期选择"
            sub-title="采用自研 canvas flex布局引擎渲染,直接传入范围值进行渲染，只会循环绘制可见日期的内容，解决picker-view日期大范围卡的问题，示例从1900到3000年展示"></t-card>
    <view class="fl r-10 faic mb-15 h-40 plr-10">
      <t-text class="slh-30">当前日期： </t-text>
      <t-text-date>{{ defaultDate }}</t-text-date>
    </view>
    <t-section title="默认值+日期限制(嵌入模式)"
               class="mb-15 r-10"></t-section>
    <t-select-date class="r-10 mb-15"
                   :range="dateRange"
                   v-model="defaultDate"
                   @change="pickerChange">
    </t-select-date>
    <t-button class="mb-15"
              type="primary"
              @click="defaultDate = '1986-11-02 12:35:40'">双向绑定测试</t-button>
    <t-col class="r-10 mb-15 p-10">
      <t-text class="slh-30">表单日期:{{ curDate }}</t-text>
    </t-col>
    <t-section title="默认值+日期限制(弹窗模式)"
               class="mb-15"></t-section>
    <t-select-date class="r-10 mb-15"
                   :embeddable="false"
                   v-model="curDate"
                   :range="dateRange">
    </t-select-date>
    <t-button class="mb-15"
              type="primary"
              @click="curDate = '1612959739000'">双向绑定测试</t-button>
  </view>
</template>

<script setup>
const defaultDate = ref<string>('1612959739000') //1986-11-02 12:35:40 or 1612959739000
const curDate = ref<string>('')
const dateRange = ref<UTSJSONObject[]>([
  {
    type: 'year',
    name: '年',
    start: 1900,
    end: 2999
  },
  {
    type: 'month',
    name: '月',
    start: 1,
    end: 12
  },
  {
    type: 'date',
    name: '日',
    start: 1,
    end: 31
  }
  // ['hour', '时', [0, 23]], // 注意：小时通常是从0到23
  // ['minute', '分', [0, 59]], // 注意：分钟和秒通常是从0开始
  // ['second', '秒', [0, 59]] // 注意：这里我也假设了最大值为59，根据实际需要调整
]);
function pickerChange(e: string) {
  // console.log(e)
}
onUnload(() => {

})
</script>

t-select-date Props ​

属性名说明类型默认值
modelValue双向绑定的日期值string''
title标题string-
titleClass标题样式string-
label标签文字string'请选择日期'
labelClass标签样式string-
contentClass内容区样式string-
range选择范围配置UTSJSONObject[]-
format日期格式string-
rowHeight行高number-
showUnit是否显示单位booleanfalse
embeddable是否嵌入页面booleanfalse
popupAttrst-popup 的属性UTSJSONObject-
path点击组件后跳转的页面路径string''
hover是否启用点击效果booleanfalse
type组件主题类型string'primary'
disabled是否禁用booleanfalse
effect组件显示主题string'normal'
size组件尺寸string'large'

t-select-date Events ​

事件名说明回调参数
confirm点击确认按钮时触发date: string
cancel点击取消按钮时触发-

t-select-date Slots ​

插槽名说明
button自定义触发按钮