uview - DatetimePicker 时间选择器 /时间戳转化

项目场景：

例如：当我们使用 DatetimePicker 组件时，这个官方插件用v-model 不生效想必大家都百度了好久了吧，我也是百度了好久没有出来，最后换了一种思路。希望对你们有帮助。

---

问题描述

例如：你们在使用的时候是不是也遇到v-model 不生效的问题，data写初始值也不能渲染到页面上，或者说渲染了但是是以时间戳的模式渲染，到这里，你就可以转换思路了，因为这就是官方一直未修复的bug。 接下来我们换一种思路。

	<u-datetime-picker ref="datetimePicker"  v-model="isDate":formatter="formatter" :show="show" mode="year-month" @confirm="confirm" @cancel="close"></u-datetime-picker>

	data() {
		return {
			show: false,
			isDate: '2018-01-01'
		};
	},

解决方案一：

例如：换一种思路：新建一个 input 里面放入v-model，把获得的值放到input里面(下面有代码)，之后在美化一下css样式即可完成。直接新建页面，全部复制过去即可。

代码如下：考虑到有的人也会用微信小程序 ，我把微信的方法也写一起了，不用的话自行删除

特别注意：

这个时候千万别再u-datetime-picker 里面加 v-model="xxx" 一加就会变为时间戳。

<template>
	<view class="">
		<view class="sss" @click="show = true">
			<text>日期选择</text>
			<input type="text" v-model="isDate" />
			<u-datetime-picker ref="datetimePicker" :formatter="formatter" :show="show" mode="year-month" @confirm="confirm" @cancel="close"></u-datetime-picker>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			isDate: '2018-01-01'
		};
	},
	onReady() {
		// 微信小程序需要用此写法
		this.$refs.datetimePicker.setFormatter(this.formatter);
	},
	methods: {
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`;
			}
			if (type === 'month') {
				return `${value}月`;
			}
			if (type === 'day') {
				return `${value}日`;
			}
			return value;
		},
		confirm(e) {
			this.show = false;
			const timeFormat = uni.$u.timeFormat;
			let timeValue = timeFormat(e.value, 'yyyy-mm');
			this.isDate = timeValue;
			console.log(this.isDate);
		},
		close() {
			this.show = false;
		}
	}
};
</script>
<style scoped>
.sss {
	display: flex;
	align-items: center;
	background: pink;
	padding: 20rpx 0;
}
.sss>input{
	margin:  20rpx;
}
</style>

解决方案二：

如果你感觉方法一不够优雅，我还写了第二种方法，async await 处理异步方法。

<template>
	<view class="">
		<view class="sss" @click="show = true">
			<text>日期选择</text>
			<u-datetime-picker :show="show" v-model="timeValue" mode="date" @confirm="confirm" @cancel="close"></u-datetime-picker>
			<view>{{ timeValue }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			timeValue: '2022-05-21',
			value1: Number(new Date())
		};
	},
	methods: {
		async confirm(e) {
			this.show = false;
			const timeFormat = uni.$u.timeFormat;
			let timeValue = await timeFormat(e.value, 'yyyy-mm-dd');
			this.timeValue = timeValue;
			console.log(timeValue);
		},
		//自己想要什么样的日期类型，以下作为参考
		// console.log(timeFormat(e.value, 'yyyy-mm-dd'));
		// console.log(timeFormat(e.value, 'yyyy-mm-dd hh:MM'));
		// console.log(timeFormat(e.value, 'yyyy-mm'));
		
		close() {
			this.show = false;
		}
	}
};
</script>
<style scoped>
.sss {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: pink;
}
.sss > view {
	margin-right: 50rpx;
}
</style>