移动端：vant Picker选择器 + ts + vue3.0 实现仿企业微信审批 选择时间组件（去年、今年（不用显示年）、明年）

https://blog.csdn.net/weixin_50448781/article/details/123660348?spm=1001.2014.3001.5501
根据这位博主小程序版本修改成自己所需功能

//template模块
<template>
	<van-nav-bar @click-left="onClickLeft('/newApplication')" @click-right="onClickRight" class="titleBgc" left-arrow
		title="加班" :border="false">
	</van-nav-bar>
	<p class="smallToast">这是本月第一次提交加班</p>
	<van-form @submit="onSubmit">
		<van-field v-model="formatAllDate" is-link readonly name="datetimePicker" label="时间选择" placeholder="点击选择时间"
			@click="pickTime" />
		<van-popup v-model:show="showPicker" position="bottom" round>
			<van-picker ref="picker" :columns="columns" @change="onChangeDate" @cancel="onConfirmDate"
				@confirm="confirmchooseTime" />
		</van-popup>
		<div style="margin: 16px;">
			<van-button round block type="primary" native-type="submit">
				提交
			</van-button>
		</div>
	</van-form>

</template>

//1.图中是三列 准备三列数据（选择时间范围是 去年、今年、明年 ）
//2.需要引入formatDate.ts文件，在本文最后有代码块
//3.vue3.0语法  引入相关方法
<script lang="ts">
	import {
		defineComponent,
		onMounted,
		ref,
		getCurrentInstance,
		reactive,
		toRaw
	} from "vue";
	import {
		Toast
	} from 'vant';
	//路由
	import {
		useRouter
	} from "vue-router";
	//格式化日期
	import {
		dateTimeFormat
	} from '@/utils/formatDate'
	export default defineComponent({
		components: {},
		setup() {
			// 获取全局挂载
			const {
				proxy
			} = getCurrentInstance()
			// 路由方法
			const router = useRouter();
			// 页面跳转方法
			const onClickLeft = (url) => router.push(url);
			const onClickRight = () => {
				console.log("搜索按钮");
			};
			// 提交表单按钮
			const onSubmit = (values) => {
				console.log('submit', values);
			};
			// 时间发生变化存储的变量
			const formatAllDatechange = ref('')
			//选择的时间
			const formatAllDate = ref(dateTimeFormat(new Date().getTime()))
			// ref
			const picker = ref(null);
			// 是否打开picker
			const showPicker = ref(false)
			//含有年份的时间数组
			let arrdate = reactive([]) 
			//格式化含有年份的时间数组
			let formatArr = reactive([]) 
			//时  数组
			let hourarr = reactive([]) 
			//分  数组
			let minarr = reactive([]) 
			// 存储三列数据的数组
			const columns = ref([])
			Date.prototype.format = function() {
				var s = '';
				var mouth = (this.getMonth() + 1) >= 10 ? (this.getMonth() + 1) : ('0' + (this.getMonth() +
					1));
				var day = this.getDate() >= 10 ? this.getDate() : ('0' + this.getDate());
				s += this.getFullYear() + '-'; // 获取年份。  
				s += mouth + "-"; // 获取月份。  
				s += day; // 获取日。  
				return (s); // 返回日期。  
			};
			// 获取今年、去年、明年的开始、结束日期 
			//type为字符串类型，有两种选择，"s"代表开始,"e"代表结束，dates为数字类型，不传或0代表今年，-1代表去年，1代表明年
			function getYear(type, dates) {
				var dd = new Date();
				var n = dates || 0;
				var year = dd.getFullYear() + Number(n);
				if (type == "s") {
					var day = year + "-01-01";
				};
				if (type == "e") {
					var day = year + "-12-31";
				};
				if (!type) {
					var day = year + "-01-01/" + year + "-12-31";
				};
				return day;
			};
			// 获取去年/今年/明年所有日期做成数组
			function getchooseDay(begin, end) {
				var beginTime = begin.split("-");
				var endTime = end.split("-");
				var beginDay = new Date();
				beginDay.setUTCFullYear(beginTime[0], beginTime[1] - 1, beginTime[2]);
				var endDay = new Date();
				endDay.setUTCFullYear(endTime[0], endTime[1] - 1, endTime[2]);
				var unixDb = beginDay.getTime();
				var unixDe = endDay.getTime();
				let arrDate = []
				for (var k = unixDb; k <= unixDe;) {
					arrDate.push((new Date(parseInt(k))).format())
					k = k + 24 * 60 * 60 * 1000;
				}
				return arrDate
			}
			// 打开弹框
			const pickTime = () => {
				let date = getcolumnsDate()
				showPicker.value = true
				columns.value = date
			}
			//获取几月几号星期几
			const dateFormat = (value) => {
				let d = new Date(value);
				let year = d.getFullYear()
				let current = new Date().getFullYear()
				let month = d.getMonth() > 8 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1)
				let day = d.getDate() > 9 ? d.getDate() : '0' + d.getDate()
				let date = month + '月' + day + '日' + getdaytext(d.getDay())
				let time = ''
				if (year != current) {
					time = year + '年' + date
				} else {
					time = date
				}
				return time;
			}
			//获取星期
			const getdaytext = (weekNum) => {
				let week = "";
				switch (weekNum) {
					case 0:
						week = "周日";
						break;
					case 1:
						week = "周一";
						break;
					case 2:
						week = "周二";
						break;
					case 3:
						week = "周三";
						break;
					case 4:
						week = "周四";
						break;
					case 5:
						week = "周五";
						break;
					case 6:
						week = "周六";
						break;
				}
				return week;
			}
			// 获取列日期
			const getcolumnsDate = () => {
				//当前日期
				arrdate = getchooseDay(getYear('s', -1), getYear('e', 1)) // 去年/今年/明年所有日期
				formatArr = arrdate.map(it => {
					return dateFormat(it) // 将日期的数组 item 加 周几
				})
				// 今天不显示周几 显示今天
				let time = dateTimeFormat(new Date().getTime())
				let index = currentIndexs(1, time)
				formatArr[index] = formatArr[index].toString().split("周")[0] + '今天'
				//小时
				for (var i = 0; i < 24; i++) {
					hourarr.push(i > 9 ? (i.toString() + "时") : '0' + i + "时")
				}

				//分钟
				for (var i = 0; i < 60; i++) {
					minarr.push(i > 9 ? (i.toString() + "分") : '0' + i + "分")
				}
				// 三列数据及默认选择
				let columnsDate = [{
						values: formatArr,
						className: 'dateTime',
						defaultIndex: currentIndexs(1, formatAllDate.value)
					},
					{
						values: hourarr,
						className: 'hourarr',
						defaultIndex: currentIndexs(2, formatAllDate.value)

					},
					{
						values: minarr,
						className: 'minarr',
						defaultIndex: currentIndexs(3, formatAllDate.value)
					}
				]
				return columnsDate
			}
			// 获取默认时间的三列下标
			const currentIndexs = (column, value) => {
				let index = 0
				let timeArr = value.replace(" ", ":").split(":");
				if (column == 1) {
					index = arrdate.map(item => item).indexOf(timeArr[0])
				} else if (column == 2) {
					index = hourarr.map(item => item).indexOf(timeArr[1] + '时')
				} else {
					index = minarr.map(item => item).indexOf(timeArr[2] + '分')
				}

				return index
			}
			// 日期选择改变
			const onChangeDate = (value) => {
				let currentyear = ''
				let currentmonth = ''
				let currentday = ''
				let currenthour = value[1].replace("时", "") //获取 月份 天 小时 也是为了判断下一级如何变化
				let type = isNaN(value[0].substr(0, 4))  
				if(type){//当格式为xx月xx日
					currentyear = new Date().getFullYear()
					currentmonth = value[0].substr(0, 2)
					currentday = value[0].substr(3, 2)
				}else{//当格式为xxxx年xx月xx日
					currentyear = value[0].substr(0, 4)
					currentmonth = value[0].substr(5, 2)
					currentday = value[0].substr(8, 2)
				}
				// 日期变化转换
				let currentminhou = currentyear + '-' + currentmonth + '-' + currentday +
					' ' + picker.value.getValues()[1].replace("时", "") +
					":" + picker.value.getValues()[2].replace("分", "")
				formatAllDatechange.value = currentminhou
			}
			// 确认时间
			const confirmchooseTime = () => {
				// console.log(formatAllDatechange.value)
				if (!formatAllDatechange.value) {
					// 没有选中时间 也得给个默认值
					formatAllDate.value = dateTimeFormat(new Date().getTime())
					showPicker.value = false
				} else {
					// 有选中值就得 赋值 currentminhou
					formatAllDate.value = formatAllDatechange.value
					showPicker.value = false
				}
			}
			// 取消选择
			const onConfirmDate = () => {
				formatAllDate.value = dateTimeFormat(new Date().getTime())
				showPicker.value = false
			}
			onMounted(() => {});
			return {
				onClickLeft,
				onClickRight,
				onSubmit,
				columns,
				pickTime,
				formatAllDate,
				showPicker,
				onChangeDate,
				picker,
				confirmchooseTime,
				onConfirmDate
			};
		},
	});
</script>

<style scope lang="less">
	.smallToast {
		color: #a9a9a9;
		font-size: 14px;
		margin: 10px;
	}
	.dateTime {
		width: 50% !important;
		flex: 2;
	}
	.hourarr, .minarr {
		width: 25% !important;
	}
	
</style>

这里是dateTimeFormat.ts文件

export function dateTimeFormat(time: number) {
	const format = '{y}-{m}-{d} {h}:{i}'
		let date = null;
	
		if (typeof time === 'string') {
			time = parseInt(time)
		}
		date = new Date(time);
	
		const formatObj = {
			y: date.getFullYear(),
			m: date.getMonth() + 1,
			d: date.getDate(),
			h: date.getHours(),
			i: date.getMinutes(),
		}
		const strTime = format.replace(/{(y|m|d|h|i)+}/g, (result, key) => {
			let value = formatObj[key];
			if (result.length > 0 && value < 10) {
				value = '0' + value;
			};
			return value;
		});
		return strTime;
}