# t-text-date

TextDate 日期文本

t-text-date 组件介绍

t-text-date 是用于格式化显示日期时间的文本组件，支持自定义日期格式，适用于需要显示格式化日期的场景。

t-text-date 平台兼容

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

t-text-date 基础用法

基础用法参考 demo/text-date/text-date.uvue。

<template>
	<view class='p-15'>
		<tui-theme-switch></tui-theme-switch>
		<t-card title="Text 文本"
				class="mb-15"
				sub-title="丰富的主题色,支持日期格式化,敏感信息隐藏,金额格式化处理,高亮文本显示,且支持插槽高亮显示"></t-card>
		<t-section title="日期格式化"
				   class='mb-15' />
		<view :class="[`mb-15 r-10 tvg p-10`]">
			<t-text-date type="info"
						 class="mb-8">2023-01-02T02:03:05</t-text-date>
			<t-text-date type="warning"
						 class="mb-8">2023/01/02 02:03:05</t-text-date>
			<t-text-date type="primary"
						 class="mb-8">2023-01-02 02:03:05</t-text-date>
			<t-text-date type="error"
						 class="mb-8"
						 format="d天h时M分s秒">1612959739000</t-text-date>
			<t-text-date type="primary"
						 class="mb-8"
						 format="yyyy-mm-dd">2023-01-02T02:03:05</t-text-date>
			<t-text-date type="primary"
						 class="mb-8"
						 format="yyyy-mm-dd">{{textValue}}</t-text-date>
			<t-button type="success"
					  class="m-15"
					  size='small'
					  @click="test">测试变量</t-button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	const textValue = ref('1612959739000')
	const test = () => {
		textValue.value = '1602859739000'
	}
</script>

t-text-date Props

属性名	说明	类型	默认值
text	需要格式化的日期文本	string	''
format	日期格式化格式	string	'yyyy-mm-dd hh:MM:ss'
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	true
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	''
size	组件尺寸，可选 large、medium、small、mini	string	'medium'

日期格式说明

占位符	说明	示例
yyyy	四位年份	2026
mm	两位月份	03
dd	两位日期	20
hh	两位小时（24小时制）	14
MM	两位分钟	30
ss	两位秒	00

t-text-date Events

事件名	说明	回调参数
click	点击时触发	event
initFinished	组件初始化完成触发	组件节点信息
touchstart	触摸开始时触发	event
touchend	触摸结束时触发	event
touchmove	触摸移动时触发	event
touchcancel	触摸取消时触发	event