t-select-date

SelectDate 日期选择

组件介绍

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

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

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

<template>
  <!-- 日期选择 -->
  <t-select-date 
    v-model="selectedDate"
    title="选择日期"
    label="请选择日期"
    :range="dateRange"
    format="YYYY-MM-DD"
    @confirm="onConfirm">
  </t-select-date>

  <!-- 日期时间选择 -->
  <t-select-date 
    v-model="selectedDateTime"
    title="选择日期时间"
    label="请选择日期时间"
    :range="dateTimeRange"
    format="YYYY-MM-DD HH:mm:ss"
    @confirm="onConfirm">
  </t-select-date>
</template>

<script setup>
const selectedDate = ref('')
const selectedDateTime = ref('')

const dateRange = [
  { name: '年' },
  { name: '月' },
  { name: '日' }
]

const dateTimeRange = [
  { name: '年' },
  { name: '月' },
  { name: '日' },
  { name: '时' },
  { name: '分' },
  { name: '秒' }
]

function onConfirm(date: string) {
  console.log('选中的日期：', date)
}
</script>

Props

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

Events

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

Slots

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