使用

<dateTimePickerSync :date.sync="birthday" mode="datetime"></dateTimePickerSync>

封装代码

/**
* @Author: 858834013@qq.com
* @Name: dateTimePickerSync
* @Date: 2022-05-14
* @Desc: 日期时间同步选择器
*/
<template>
	<div class="lbtk_gyf_main_one">
		<div @click="show=true" class="lbtk_gyf_main_one_time">
			{{this.date}}
		</div>
		<u-datetime-picker :value="newdate" :minDate="start" :maxDate="end" @cancel="show=false" @confirm="getConfirm"
			:show="show" :mode="mode" :formatter="formatter">
		</u-datetime-picker>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	export default {
		name: 'dateTimePickerSync',
		data() {
			return {
				show: false,
				start: new Date('2000').valueOf(),
				end: new Date('2030').valueOf(),
				newdate: dayjs(this.date).valueOf(),
			};
		},
		watch: {
			date() {
				this.newdate = dayjs(this.date).valueOf()
			},
		},
		mounted() {
			this.newdate = dayjs(this.date).valueOf()
		},
		props: {
			date: {
				type: String,
				default () {
					return ''
				}
			},
			mode: {
				type: String,
				default () {
					return 'date'
				}
			},
		},

		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			getConfirm(e) {
				this.$emit("update:date", dayjs(e.value).format("YYYY-MM-DD HH:mm"))
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lbtk_gyf_main_one {
		width: 626upx;
		margin: 0 auto;
		padding-top: 31upx;
		padding-bottom: 26upx;
		display: flex;
		align-items: center;
		position: relative;
		border-bottom: 1upx solid #e2d9d2;
	}

	.lbtk_gyf_main_one_time {
		display: flex;
		align-items: center;
		width: 80%;
	}
</style>