vue+elementUI简单的实现日历功能

vue+elementUI简单的实现日历功能

    

    

        
上一月
        
{
    { year }}年{
    { month }}月{
    { day }}日
        
下一月
        

    
    
    

        

            
{
    { item }}
            
        
        

            

                
{
    { item - beginDay }}
                
{
    { item - beginDay + prevDays }}
                
{
    { item - beginDay -curDays }}
            
        
    

## javascript

<script>
    export default {
     
        name: "HelloWorld",
        data() {
     
            return {
     
                year: null,
                month: null,
                day: null,
                currentDay: null,
                currentYearMonthTimes: null,//当前年的月的天数
                monthOneDay: null,//一个月中的某一天
                curDate: null,
                prevDays: null,//上一月天数
            }
        },
        computed: {
     
            curDays() {
     
                return new Date(this.year, this.month, 0).getDate();
            },
            // 设置该月日期起始值（找到一号是在哪里）
            beginDay() {
     
                return new Date(this.year, this.month - 1, 1).getDay();
            }
        },
        created() {
     
            this.getInitDate();
            this.currentYearMonthTimes = this.mGetDate(this.year, this.month); //本月天数
            this.prevDays = this.mGetDate(this.year, this.month - 1);
            this.curDate = `${
       this.year}-${
       this.month}-${
       this.day}`
            console.log(this.curDate)
        },
        methods: {
     
            refresh(){
      //强制刷新页面
                location. reload()
            },
            handleClickDay(day){
       //点击这一天，绑定点击事件
                console.log( '形参传进来的',day)
                console.log( 'data里面的this.day',this.day)
                console.log( 'data里面的currentYearMonthTimes',this.currentYearMonthTimes)
                this.day = day
                if(this.day > this.currentYearMonthTimes){
     
                    this.$message.warning('不能选择超出本月的日期');
                }
                console.log(day)
            },
            computedDay() {
     
                const allDay = new Date(this.year, this.month, 0).getDate();
                if (this.day > allDay) {
     
                    this.day = allDay;
                }
            },
            //设置页头显示的年月日
            getInitDate() {
     
                const date = new Date();
                this.year = date.getFullYear();
                this.month = date.getUTCMonth() + 1;
                this.day = date.getDate();
            },
            // 如果要获取当前月份天数:
            mGetDate() {
     
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var d = new Date(year, month, 0);
                return d.getDate();
            },
            handlePrev() {
     
                if (this.month == 1) {
     
                    this.month = 12
                    this.year--
                } else {
     
                    this.month--
                }
                this.computedDay()
            },
            handleNext() {
     
                if (this.month == 12) {
     
                    this.month = 1
                    this.year++
                } else {
     
                    this.month++
                }
                this.computedDay()
            }
        }
    }
</script>

大概就是这样 欢迎大家讨论和@我

完成后的效果