日历 Calendar ​

<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="基础示例,更多见文档"></tm-text>
			<tm-divider></tm-divider>
			<tm-radio-group v-model="modeltype">
				<tm-radio value="day" label="按天"></tm-radio>
				<tm-radio value="week" color="red" label="按周"></tm-radio>
				<tm-radio value="month" color="blue" label="按月"></tm-radio>
				<tm-radio value="quarter" color="blue" label="按季度"></tm-radio>
				<tm-radio value="year" color="pink" label="按年"></tm-radio>
				<tm-radio value="rang" color="green" label="范围"></tm-radio>
			</tm-radio-group>
			<view>
				<tm-divider></tm-divider>
				<tm-checkbox v-if="modeltype == 'day'" v-model="multiple" label="多选日期"></tm-checkbox>
			</view>
			<tm-calendar-view v-model="testVal" :defaultValue="testVal" @change="change" :dateStyle="dateStyle" :multiple="multiple" color="green" :model="modeltype"></tm-calendar-view>
		</tm-sheet>
		<tm-sheet :margin="[32, 0]">
			<tm-text :font-size="24" _class="text-weight-b" label="弹层式,上方组件一致的用法"></tm-text>
			<tm-divider></tm-divider>
			<tm-radio-group v-model="modeltype">
				<tm-radio value="day" label="按天"></tm-radio>
				<tm-radio value="week" color="red" label="按周"></tm-radio>
				<tm-radio value="month" color="blue" label="按月"></tm-radio>
				<tm-radio value="quarter" color="blue" label="按季度"></tm-radio>
				<tm-radio value="year" color="pink" label="按年"></tm-radio>
				<tm-radio value="rang" color="green" label="范围"></tm-radio>
			</tm-radio-group>
		</tm-sheet>
		<tm-cell @click="showdate = true" title="请选择时间" :right-text="dateStr"></tm-cell>
		<tm-calendar
			format="YYYY年MM月DD日"
			:dateStyle="dateStyle"
			@click="test"
			:multiple="multiple"
			color="red"
			v-model:show="showdate"
			v-model:model-str="dateStr"
			:model="modeltype"
		></tm-calendar>
		<view style="height: 100rpx"></view>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref, nextTick } 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 tmRadioGroup from '@/tmui/components/tm-radio-group/tm-radio-group.vue'
import tmRadio from '@/tmui/components/tm-radio/tm-radio.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
import tmCell from '@/tmui/components/tm-cell/tm-cell.vue'
import tmCalendar from '@/tmui/components/tm-calendar/tm-calendar.vue'
import tmCalendarView from '@/tmui/components/tm-calendar-view/tm-calendar-view.vue'
import tmCheckbox from '@/tmui/components/tm-checkbox/tm-checkbox.vue'
const testVal = ref(["2024-2-24"])
const dateStyle = ref([
	{
		date: '2022-12-8', //日期
		text: false, //浅色背景。
		color: 'red', //主题色.
		extra: '测试' //额外的内容，在日期下方显示的文本。
	},
	{
		date: '2022-12-24', //日期
		text: false, //浅色背景。
		color: 'orange', //主题色.
		extra: '签到' //额外的内容，在日期下方显示的文本。
	}
])
const modeltype = ref('day')
const dateStr = ref('')
const showdate = ref(false)
const multiple = ref(false)
const test = (e: any) => {
	console.log(e, 'test')
}

const change = (e:any)=>{
	const p = e.split('/');
	const p1 = p[0]+"/"+p[1]+"/12";
	testVal.value = [e];
	
	nextTick(()=>{
		dateStyle.value = [
		{
			date: p1, //日期
			text: false, //浅色背景。
			color: 'black', //主题色.
			extra: '已签' //额外的内容，在日期下方显示的文本。
		}]
	})
}
</script>