简单的vue日历组件用法及实现教程

效果图

根据公司设计图制作了一个简单的日历组件，主要包括切换上一年、上一月、下一年、下一月，锁定开始时间、结束时间等功能，以上就是效果图。

用法

**html


**js
kim=new Vue({
    el:"#app",
    data:{
        date0:{
            now:"2017-11-05",
            end:"2017-11-25",
            callback:function(d){
                kim.date1.start=d;//两个组件间互相关联
            }
        },
        date1:{
            now:"2017-11-25",
            start:"2017-11-05",
            callback:function(d){
                kim.date0.end=d;
            }
        }
    }
});

主体部分

Vue.component("mCalendar",{
    props:["child"],
    data:function(){
        return {
            open:false,
            value:this.child.now,
            datatop:"",
            datalist:[],
            year:"",
            month:""
        }
    },
    methods:{
        showCalendar:function(){
            this.open=!this.open;
            if(this.open){
                if(this.value){
                    this.value=this.child.now.replace(/-/g,"/");
                }else{
                    this.value=new Date().getFullYear()+'/'+(Number(new Date().getMonth())+1)+'/'+new Date().getDate();
                };
                if(this.isDate()){
                    this.setDateInfo();
                };
            };
        },
        setDateInfo:function(dates){ 
            dates=dates||this.value;
            var Dates=new Date(dates);
            this.year=Dates.getFullYear();
            this.month=Dates.getMonth()+1;
            var day=Dates.setDate(1);
            var week=new Date(day).getDay();
            var num=new Number;
            if(this.month==2){
                num=this.year%100==0?(this.year%400==0?29:28):(this.year%4==0?29:28);
            }else if(this.month==1||this.month==3||this.month==5||this.month==7||this.month==8||this.month==10||this.month==12){
                num=31;
            }else{
                num=30;
            };
            this.datalist=[];
            for(var i=1;i<=(num+week);i++){
                if(i>week){
                    var one=new Array;
                    one.push(this.year);
                    one.push(this.zeroFill(this.month));
                    one.push(this.zeroFill(i-week));
                    var start=this.child.start?this.child.start.split("-"):0;
                    start=this.zeroFill(start[0])+'/'+this.zeroFill(start[1])+'/'+this.zeroFill(start[2]);
                    start=new Date(start);
                    var end=this.child.end?this.child.end.split("-"):0;
                    end=this.zeroFill(end[0])+'/'+this.zeroFill(end[1])+'/'+this.zeroFill(end[2]);
                    end=new Date(end);
                    var now=new Date(one.join("/"));
                    var className="";
                    if(one[0]==new Date(this.value).getFullYear()&&one[1]==new Date(this.value).getMonth()+1&&one[2]==new Date(this.value).getDate()){
                        className+="on ";
                    };
                    if(nowend){
                        className+='disabled';
                        one=[];
                    };
                    this.datalist.push({"className":className,"num":(i-week),"date":one.join("-")});
                }else{
                    this.datalist.push({"className":"disabled","num":"","date":""});
                };
            };
            this.datatop=''+this.getMonthText(this.month)+''+this.year+'';
        },
        clickDate:function(type,day,dates){
            switch (type){
                case 1:
                    this.setDateInfo((this.year-1)+"/"+this.month+"/"+1);
                    break;
                case 2:
                    this.setDateInfo((this.month-1==0?this.year-1:this.year)+"/"+(this.month-1==0?12:this.month-1)+"/"+1);
                    break;
                case 3:
                    this.setDateInfo((this.month+1==13?this.year+1:this.year)+"/"+(this.month+1==13?1:this.month+1)+"/"+1);
                    break;
                case 4:
                    this.setDateInfo((this.year+1)+"/"+this.month+"/"+1);
                    break;
                case 5:
                    if(day){
                        this.child.now=day;
                        this.showCalendar();
                        this.child.callback&&this.child.callback(day);
                    };
                    break;
                default:
                    break;
            }
        },
        isDate:function(){
            var num=this.value.split("/");
            if(num.length==3&&!isNaN(num[0])&&!isNaN(num[1])&&!isNaN(num[2])){
                return true;
            };
            return false;
        },
        zeroFill:function(num){
            num=Number(num);
            num=num<10?"0"+num:num;
            return num;
        },
        getMonthText:function(m){
            var month='';
            switch(m){
            case 1:
                month="一月";
                break;
                case 2:
                month="二月";
                break;
            case 3:
                month="三月";
                break;
                case 4:
                month="四月";
                break;
            case 5:
                month="五月";
                break;
                case 6:
                month="六月";
                break;
            case 7:
                month="七月";
                break;
                case 8:
                month="八月";
                break;
            case 9:
                month="九月";
                break;
                case 10:
                month="十月";
                break;
            case 11:
                month="十一月";
                break;
                case 12:
                month="十二月";
                break;
            };
            return month;
        }
    },
    template:'
'+
                ''+
                '
'+
                    '
'+
                        ''+
                        ''+
                        '
 
'+
                        ''+
                        ''+
                    '
'+
                    '
'+
                        '日'+
                        '一'+
                        '二'+
                        '三'+
                        '四'+
                        '五'+
                        '六'+
                    '
'+
                    '
{{ s.num }}
'+
                    '
 
'+
                '
'+
            '
'
});