使用vue3写一个出出生日期选择器
时间: 2024-05-24 22:05:08 浏览: 13
好的,以下是使用 Vue 3 写一个出生日期选择器的示例代码:
```html
<template>
<div>
<label for="year">年:</label>
<select id="year" v-model="selectedYear" @change="updateDays">
<option v-for="year in years" :key="year" :value="year">{{ year }} 年</option>
</select>
<label for="month">月:</label>
<select id="month" v-model="selectedMonth" @change="updateDays">
<option v-for="(month, index) in months" :key="index" :value="index + 1">{{ month }} 月</option>
</select>
<label for="day">日:</label>
<select id="day" v-model="selectedDay">
<option v-for="day in days" :key="day" :value="day">{{ day }} 日</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
selectedYear: null,
selectedMonth: null,
selectedDay: null,
years: [],
months: [
'一月',
'二月',
'三月',
'四月',
'五月',
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'十二月'
],
days: []
}
},
mounted() {
// 初始化年份
const currentYear = new Date().getFullYear()
for (let i = currentYear; i >= currentYear - 100; i--) {
this.years.push(i)
}
// 初始化月份和天数
this.selectedMonth = new Date().getMonth() + 1
this.updateDays()
},
methods: {
updateDays() {
if (this.selectedYear && this.selectedMonth) {
// 计算选中月份的天数
const daysInMonth = new Date(this.selectedYear, this.selectedMonth, 0).getDate()
// 更新可选天数
this.days = []
for (let i = 1; i <= daysInMonth; i++) {
this.days.push(i)
}
// 如果选中的天数超出当前月份的最大天数,重置选中天数
if (this.selectedDay > daysInMonth) {
this.selectedDay = null
}
}
}
}
}
</script>
```
这个出生日期选择器包含了年、月、日三个下拉框,用户可以通过选择这三个下拉框来选择自己的出生日期。其中,年份的范围是当前年份往前100年,月份和天数会根据选中的年份和月份动态更新可选范围,以保证选择的日期是合法的。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)