VUE项目中基于elementUI自定义月日组件 定制化月日组件

月日组件

文章版权声明： 基于 http://t.csdn.cn/LcgIT 文章进行修改

主要基于原文作者的插件基础上增加了可设置disable月份和日期；

第一步：安装moment 插件

npm install --save moment

第二步：复制month-day-picker.vue组件见下方代码

// month-day-picker.vue

第三步： 使用月日组件

// 先引入上述月日组件
import DateMonthDay from "../components/month-day-picker"  //　具体组件地址根据自己的路径修改
// 注册组件
components:{ DateMonthDay  },
// template中组件
// 比如我写在了el-form组件内

         
         
     

// data中预制参数
data(){
	return{
		form: {
                year: '',// 年份，根据年份才能判断2
                startDate: "",
                endDate: "",
            },
            dateDefault: "03-01",// 组件默认日期，此处填写1月1日，可根据情况自行修改，不跟form.endDate用同一个字段是因为form.endDate会随时变更
            // disabledStartMonth代表这个月份之前的月份禁用，disabledEndMonth代表这个月份以后的月份禁用，禁用日期为空代表没有禁用日期，也可以只填其中一个
            disabledStartMonth: "03",// 3月份之前的日期不可选
            disabledEndMonth: "06", // 6月份之后的日期不可选 ，按照我这个默认设置也就是3月到6月才是可以选择的
	}
}
// script中的事件
// （开始日期和结束日期日期校验）  结尾返回true和false便于在提示后用户仍然不按正确提示修改日期，在保存提交表单时可以再次执行此事件。
        endSure() {
            if (new Date(this.form.startDate) > new Date(this.form.endDate)) {
                this.$message({
                    type: 'warning',
                    message: '结束时间必须在开始时间之后！',
                    showClose: true,
                })
                return false;
            }
            return true
        },

// 切换 月日
        changeDay(day,type){
            let form = this.form;
            if(type === "startDate"){
                this.form.startDate = form.year+'-'+day.date
            }else{
                this.form.endDate = form.year+'-'+day.date
            }
        },

如有疑问欢迎交流