页面效果:
1、创建组件，并在全局进行注册
2、在组件中引入以下代码
<!-- 日期搜索框 -->
<template>
<div id="myDate">
<el-select v-model="yearsModel" @change="dateChange(1)" placeholder="请选择">
<el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-select v-model="monthsModel" @change="dateChange(2)" placeholder="请选择">
<el-option v-for="item in months" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-select v-model="daysModel" @change="dateChange(3)" placeholder="请选择 "
v-if="monthFlag">
<el-option v-for="item in days" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</template>
<script lang="ts">
export default {
props: {
},
data() {
return {
yearsModel: null,
years: [],
monthsModel: null,
months: [],
daysModel: null,
days: [],
monthStatus: true
} as any
},
created() {
this.init();
},
methods: {
init() {
var myDate = new Date;
var year = myDate.getFullYear();//获取当前年
var month = myDate.getMonth() + 1;//获取当前月
var day = myDate.getDate();//获取当前日
this.initSelectYear(year)
this.initSelectMonth();
this.initSelectDay(year, month);
this.yearsModel = year;
// this.monthsModel = month;
// this.daysModel = day;
let obj = { year: this.yearsModel, month: this.monthsModel, day: this.daysModel }
this.$emit('dateChange', obj);
},
initSelectYear(year: number) {
this.years = [];
for (let i = 0; i < 30; i++) {
this.years.push({ value: (year - i), label: (year - i) + "年" });
}
},
initSelectMonth() {
this.months = [];
for (let i = 1; i <= 12; i++) {
if (i < 10) {
this.months.push({ value: '0' + i, label: i + "月" });
} else {
this.months.push({ value: i, label: i + "月" });
}
}
},
initSelectDay(year: number, month: number) {
var maxDay = this.getMaxDay(year, month);
this.days = [];
for (var i = 1; i <= maxDay; i++) {
if (i < 10) {
this.days.push({ value: '0' + i, label: i + "日" });
} else {
this.days.push({ value: i, label: i + "日" });
}
}
},
dateChange(type: number) {
//1年 2月 3日
if (type == 1 || type == 2) {
if (this.monthsModel == 0) {
this.daysModel = 0;
this.initSelectDay(this.yearsModel, 1);
} else {
this.initSelectDay(this.yearsModel, this.monthsModel);
}
}
//操作父组件方法
let obj = { year: this.yearsModel, month: this.monthsModel, day: this.daysModel }
if (obj.month == null) {
this.monthStatus = true
} else {
this.monthStatus = false
}
this.$emit('dateChange', obj);
},
getMaxDay(year: number, month: number) {
var new_year = year; //取当前的年份
var new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定）
if (month > 12) //如果当前大于12月，则年份转到下一年
{
new_month -= 12; //月份减
new_year++; //年份增
}
var new_date = new Date(new_year, new_month, 1);//取当年当月中的第一天
return (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate();//获取当月最后一天日期
}
}
}
</script>
<style lang="scss" scoped>
</style>
3、在对应使用的页面使用即可
<template>
<DateSelect @dateChange="dateChange" />
</template>
<script lang="ts" setup>
const data = ref<any>('');
const dateChange = (obj: any) => {
data.value = obj
console.log(data.value)
}
</script>
<style lang="scss" scoped>
</style>
