需求描述
最近需要实现一个只选择月和日的组件,如下图
本来想实现像elementUI 日期选择器类似的功能,但是element没有,网上也没有找到合适的,最后换了一个思路,利用element的Cascader 级联选择器实现了一个,感觉看上去也还行在此分享一下
实现效果
实现起来挺简单,主要是为大家提供一种思路
代码如下
<el-cascader
v-model="date"
:options="options"
separator=""
:props="{ expandTrigger: 'hover' }"
></el-cascader>
data() {
return {
date: [],
options: [],
};
},
mounted() {
this.initDate();
},
methods: {
initDate() {
let { options } = this;
for (let i = 0; i < 12; i++) {
let month = { value: `${i + 1}月`, label: `${i + 1}月` };
let children = [];
for (let j = 0; j < 31; j++) {
let day = { value: `${j + 1}号`, label: `${j + 1}号` };
if (j < 29) {
children.push(day);
}
if (j == 29) {
if (i != 1) {
children.push(day);
}
}
if (j == 30) {
if ([1, 3, 5, 7, 8, 10, 12].includes(i + 1)) {
children.push(day);
}
}
}
this.$set(month, "children", children);
options.push(month);
}
},
}