这两天做个小项目，里面用到了日期选择，但是不想导入日期组件，觉得没有必要，所以就用下拉框简单实现了一个日期选择，记录分享一下。

DIV 部分：

<div class="layer-pd">
	<span>发证日期</span>
	<div class="set-multi">
		<select class="in set-selb" v-model="curY" @change="getDay">
			<option>选择年</option>
			<option v-for="item in year">{{ item }}</option>
		</select>
		<em class="gray">年</em>
		<select class="in set-seld" v-model="curM" @change="getDay">
			<option>选择月</option>
			<option v-for="item in month">{{ item }}</option>
		</select>
		<em class="gray">月</em>
		<select class="in set-seld" v-model="curD">
			<option>选择日</option>
			<option v-for="item in day">{{ item < 10 ? '0' + item : item }}</option>
		</select>
		<em class="gray">日</em>
	</div>
</div>

Js 部分：

<script setup>

let curY = ref('选择年'), curM = ref('选择月'), curD = ref('选择日'), year = ref([]), month = ref(['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']), day = ref([])

// 初始化年
const getYear = (a, b) => {
	year.value = Array.from(Array(b - a + 1)).map((e, i) => a + i)

}

// 获取对应日期
const getDay = () => {
	if(curY.value != '选择年' && curM.value != '选择月') {
		day.value = new Date(curY.value, curM.value, 0).getDate()
	}
}

// 调用
getYear(2024, 2029)
</script>