uniapp vue3项目开发中，使用uView-plus3.0来进行日期选择，我们需要在选择日期的时候显示年月日，选择后格式化显示在页面中。

在这里如果我们直接对date.value进行格式化处理，然后再渲染会出现格式化错误问题，所以我们这里使用computed来进行格式化，这样就避免了对元数据的污染。

html

<div class="infoDate" @click="getShow">
	<text>{{formattedDate}}</text>
	<image src="../../../static/my/wallet/icon_down.png"></image>
</div>
		<up-datetime-picker ref="datetimePickerRef" :formatter='formatter' :show="show" v-model="date"
			@confirm="handleConfirm" @cancel="handleCancel" mode="date"></up-datetime-picker>

<script setup>
	import {
		ref,
		onMounted,
		computed,
	} from 'vue';
	import dayjs from 'dayjs';

	const date = ref(dayjs().format('YYYY-MM-DD'));
	const show = ref(false);
	
	const formattedDate = computed(() => {
		return dayjs(date.value).format('YYYY年MM月DD日');
	});

	onMounted(() => {

	});

	function handleConfirm() {
		console.log(date.value)
		show.value = false;
		// date.value = dayjs(date.value).format('YYYY年MM月DD日');
		console.log('日期更新为:', date.value);
	}

	function handleCancel() {
		show.value = false;
		console.log('日期选择已取消');
	}

	function formatter(type, value) {
		if (type === 'year') {
			return `${value}年`;
		}
		if (type === 'month') {
			return `${value}月`;
		}
		if (type === 'day') {
			return `${value}日`;
		}
		return value;
	}

	function getCurrentTab(e) {
		currentTab.value = e;
	}

	function getShow() {
		show.value = true;
	}
</script>