时间范围选择器 Time-between ​

<template>
	<tm-app>
		<tm-sheet :margin="[0,0]" :padding="[16,24]" :round="0">
			<tm-text label="平铺式,这是一个时间范围选择器,主要应用于数据查询"></tm-text>
			<tm-divider></tm-divider>
			<tm-time-between v-model="datevalue" :default-value="datevalue"></tm-time-between>
		</tm-sheet>

		<tm-cell  :margin="[16,16]" :round="6" :right-text="datevalue_str||'请选择时间'" @click="show=true" title="弹层式选择时间"></tm-cell>
		<tm-drawer v-model:show="show" :height="900" hideHeader>
			<view class="pa-16">
				<tm-time-between @confirm="show=false" :asyncModel="false" v-model="datevalue" :default-value="datevalue"></tm-time-between>
			</view>
		</tm-drawer>
	</tm-app>
</template>

<script lang="ts" setup>
	import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
	import tmApp from "@/tmui/components/tm-app/tm-app.vue"
	import tmText from "@/tmui/components/tm-text/tm-text.vue"
	import tmCell from "@/tmui/components/tm-cell/tm-cell.vue"
	import tmDrawer from "@/tmui/components/tm-drawer/tm-drawer.vue"
	import tmDivider from "@/tmui/components/tm-divider/tm-divider.vue"
	import tmTimeBetween from "@/tmui/components/tm-time-between/tm-time-between.vue"
	import {computed, ref} from "vue"
	const datevalue = ref([])
	const datevalue_str = computed(()=>datevalue.value.join('~'))
	const show = ref(false)
</script>

<style>

</style>