时间选择器 Time ​

<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="基础示例,更多见文档"></tm-text>
			<tm-divider></tm-divider>
			<tm-time-view format="YYYY年MM月" v-model="modelvalue" v-model:model-str="modelvalueStr" :showDetail="{
				year: true,
				month: true,
				day: false,
				hour: false,
				minute: false,
				second: false
			}"></tm-time-view>
			
			<view>
				<text>双向输出：{{modelvalue}}</text>
				<text>单向格式输出：{{modelvalueStr}}</text>
			</view>
		</tm-sheet>

		<tm-time-picker
			:showDetail="{
				year: false,
				month: false,
				day: false,
				hour: true,
				minute: true,
				second: false
			}"
			v-model="dateTime"
			:defaultValue="dateTime"
			format="HH:mm"
			v-model:model-str="dateTimeStr"
			start="1949/6/15 00:00:00"
			end="2048/6/15 23:59:59"
		>
			<tm-cell title="时分" :right-text="dateTimeStr || '请选择'"></tm-cell>
		</tm-time-picker>

		<tm-cell @click="showdate = true" title="请选择时间" :right-text="dateSar || '请选择'"></tm-cell>
		<tm-time-picker
			:showDetail="{
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: true
			}"
			v-model:show="showdate"
			v-model="dateSAva"
			:defaultValue="dateSAva"
			format="YYYY年MM月DD日HH时mm分ss秒"
			v-model:model-str="dateSar"
		></tm-time-picker>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="全部显示,更多请自行配置"></tm-text>
			<tm-text :font-size="24" _class="text-weight-b" label="[2022-5-23]被禁用无法选择"></tm-text>
			<tm-divider></tm-divider>
			<tm-time-view
				v-model="dateSAva"
				v-model:model-str="dateStr"
				format="YYYY年MM月DD日"
				:defaultValue="dateSAva"
				:disabledDate="['2022-5-23']"
				:showDetail="{
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				}"
			></tm-time-view>
		</tm-sheet>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmTimeView from '@/tmui/components/tm-time-view/tm-time-view.vue'
import tmTimePicker from '@/tmui/components/tm-time-picker/tm-time-picker.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
import tmCell from '@/tmui/components/tm-cell/tm-cell.vue'
const dateStr = ref('')
const dateSAva = ref('2016-4-2 15:00:00')
const dateSar = ref('')
const dateTime = ref('2014-6-15 15:00:00')
const dateTimeStr = ref('')
const showdate = ref(false)
const modelvalue = ref("2024-3-20")
const modelvalueStr = ref("2024-3-20")

</script>