简单的vue日历组件

最新推荐文章于 2024-07-29 20:40:56 发布

金大光

最新推荐文章于 2024-07-29 20:40:56 发布

阅读量5.5k

点赞数 1

分类专栏： vue 文章标签： vue vue组件日历组件 js

本文链接：https://blog.csdn.net/qq_17757973/article/details/78659840

版权

效果图

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

用法

**html
<m-calendar :child="date0"></m-calendar>
<m-calendar :child="date1"></m-calendar>
**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