vue日历组件封装,可全选,可单选,并可以取各自的值_vue日期选择组件

        }
    },
    // 是否显示农历
    lunar: {
        type: Boolean,
        default: false
    },

    // 自定义星期名称
    weeks: {
        type: Array,
        default:function(){
            return window.navigator.language.toLowerCase() == "zh-cn"?['日', '一', '二', '三', '四', '五', '六']:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        }
    },
    // 自定义月份
    months:{
        type: Array,
        default:function(){
            return window.navigator.language.toLowerCase() == "zh-cn"?['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']:['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
        }
    },
    // 自定义事件
    events:  {
        type: Object,
        default: function(){
            return {}
        }
    },
},
data() {
    return {
        years:[],
        yearsShow:false,
        year: 0,
        month: 0,
        day: 0,
        days: [],
        multiDays:[],
        today: [],
        festival:{
            lunar:{
                "1-1":"春节",
                "1-15":"元宵节",
                "2-2":"龙头节",
                "5-5":"端午节",
                "7-7":"七夕节",
                "7-15":"中元节",
                "8-15":"中秋节",
                "9-9":"重阳节",
                "10-1":"寒衣节",
                "10-15":"下元节",
                "12-8":"腊八节",
                "12-23":"祭灶节",
            },
            gregorian:{
                "1-1":"元旦",
                "2-14":"情人节",
                "3-8":"妇女节",
                "3-12":"植树节",
                "4-5":"清明节",
                "5-1":"劳动节",
                "5-4":"青年节",
                "6-1":"儿童节",
                "7-1":"建党节",
                "8-1":"建军节",
                "9-10":"教师节",
                "10-1":"国庆节",
                "12-24":"平安夜",
                "12-25":"圣诞节",
            },
        },
        rangeBegin:[],
        rangeEnd:[],
    }
},
watch:{
    events(){
        this.render(this.year,this.month)
    },
    value(){
        this.init();
    }
},
mounted() {
    this.init()
},
methods: {
    init(){
        if (this.month === 0) {
            let now = new Date();
            this.year = now.getFullYear()
            this.month = now.getMonth()
            this.day = now.getDate()

        } else {
            if (this.value.length>0) {
                if (this.range) { //范围
                    this.year = parseInt(this.value[0][0])
                    this.month = parseInt(this.value[0][1]) - 1
                    this.day = parseInt(this.value[0][2]) 

                    let year2 = parseInt(this.value[1][0])
                    let month2 = parseInt(this.value[1][1]) - 1
                    let day2 = parseInt(this.value[1][2]) 

                    this.rangeBegin = [this.year, this.month,this.day]
                    this.rangeEnd = [year2, month2 , day2]
                }else if(this.multi){//多选
                    this.multiDays=this.value;
                    this.year = parseInt(this.value[0][0])
                    this.month = parseInt(this.value[0][1]) - 1
                    this.day = parseInt(this.value[0][2]) 
                }else{ //单选
                    this.year = parseInt(this.value[0])
                    this.month = parseInt(this.value[1]) - 1
                    this.day = parseInt(this.value[2]) 
                }
            }  
        }
        this.render(this.year, this.month)
    },
    // 渲染日期
    render(y, m) {
        let firstDayOfMonth = new Date(y, m, 1).getDay()         //当月第一天
        let lastDateOfMonth = new Date(y, m + 1, 0).getDate()    //当月最后一天
        let lastDayOfLastMonth = new Date(y, m, 0).getDate()     //最后一月的最后一天
        this.year = y
        let seletSplit = this.value
        let i, line = 0,temp = [],nextMonthPushDays = 1
        for (i = 1; i <= lastDateOfMonth; i++) {
            let day = new Date(y, m, i).getDay() //返回星期几(0~6)
            let k
            // 第一行
            if (day == 0) {
                temp[line] = []
            } else if (i == 1) {
                temp[line] = []
                k = lastDayOfLastMonth - firstDayOfMonth + 1
                for (let j = 0; j < firstDayOfMonth; j++) {
                    // console.log("第一行",lunarYear,lunarMonth,lunarValue,lunarInfo)
                    temp[line].push(Object.assign(
                        {day: k,disabled: true},
                        this.getLunarInfo(this.computedPrevYear(),this.computedPrevMonth(true),k),
                        this.getEvents(this.computedPrevYear(),this.computedPrevMonth(true),k),
                    ))
                    k++;
                }
            }
   
            
            if (this.range) { // 范围
                // console.log("日期范围",this.getLunarInfo(this.
  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值