【日历】自定义（上下月切换）

JavaScript Date 对象

>获取每个月天数

function mGetDate(year, month){
    var d = new Date(year, month, 0);
    return d.getDate();
}

> 获取当月第一周周几

function dayStart (year, month) { 
  var tmpDate = new Date(year, month - 1, 1); 
  return (tmpDate.getDay()); 
}

>上下切换月 +1 或 -1一个月操作

     mChange: function (m) {
          this._date.setMonth(this._date.getMonth() + m);
          this.dateYM = this._date.getFullYear() + '-' + (this._date.getMonth() + 1);

          // 切换上下月，获取year \ month  
          this.cy = this._date.getFullYear();
          this.cm = this._date.getMonth() + 1;

          // 重组数组 
          this.curMonthDay = this.getGetDate(this.cy, this.cm)
          this.curWeek = this.dayStart(this.cy, this.cm)
  console.log(this.curWeek)

          this.getPreMonthDay();
        },

> 获取上个月天数,通过当前月减少 1个月

 this.getPreMonthDay();

// 当前日期
          var cyear = this._date.getFullYear();
          var cMonth = this._date.getMonth();
 
          //2020/8/24
          this.preDate = new Date(cyear, cMonth);
          // 上个月日期
          this.preDate.setMonth(this.preDate.getMonth()-1);

          // alert(this.preDate.getFullYear())
          var getPreDays = this.getGetDate(this.preDate.getFullYear(), this.preDate.getMonth()+1);

简单示例效果图：实现上下月份切换

界面绘画
1、查找当月初第一天是周几，填充空位
2、查找当月天数，填充当月天数
3、当月末是否需要填充下个月天数

上下切换月
1、查询上个月天数

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="vue.js"></script>
  <title>日历</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul li {
      list-style: none;
      box-sizing: border-box;
      float: left;
    }

    .calendar-body {
      width: 560px;
      border: 1px solid #ccc;
    }

    .calendar-body ul {
      overflow: hidden;
    }

    .title-month {
      text-align: center;
    }

    .title-month span {
      cursor: pointer;
    }

    .calendar-body .cal-title li {
      width: 80px;
      height: 40px;
      /* border: 1px solid red; */

      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cal-day {}

    .cal-day .day {
      position: relative;
    }

    .cal-day li {
      width: 80px;
      height: 80px;
      /* border: 1px solid red; */

      text-align: center;

    }

    .cal-day li.blue {
      background-color: blue;
      color: #fff;
    }

    .cal-day li.active {
      background-color: #ccc;
      color: #fff;
    }

    .day-num {
      margin-top: 30px;
    }

    .gay {
      color: #ccc;
    }
    .red{
      color: red;
    }
  </style>

</head>

<body>
  <div class="calendar-body">
    <ul class="cal-title">
      <li class="title">日</li>
      <li class="title">一</li>
      <li class="title">二</li>
      <li class="title">三</li>
      <li class="title">四</li>
      <li class="title">五</li>
      <li class="title">六</li>
    </ul>
    <!-- https://www.cnblogs.com/crushxz/p/11330726.html -->
    <p class="title-month"><span @click="upFun">
        < </span>{{dateYM}} <span @click="downFun"> >
      </span></p>
    <ul class="cal-day">
      <li class="day" v-for="(item, index) in curWeek">
        <p class="day-num gay" :class="{red:(index)==0}">{{item}} </p>
      </li>
      <template v-for="(item,index) in curMonthDay">
        <li class="day" :class="{blue: ((index+1) == initD) && initY==cy && initM ==cm}" @click="dayFun(index, $event)">
          <p class="day-num" >{{(index+1)}}</p>
          <p v-if="((index+1) == initD)&&initY==cy && initM ==cm">今天</p>
        </li>
      </template>
      <template v-for="(item, index) in nextDate">
        <li class="day">
          <!-- <p class="day-num gay" :class="{red:(((index+1)+curWeek.length+curMonthDay))%7==0}" >{{index+1}} </p> -->
        </li>
      </template>
    </ul>
  </div>

  <script>
    var vm = new Vue({
      el: '.calendar-body',
      data: {
        tempArr: [],
        nextDate: 0, //下个要补充数

        preDate: 0, //上个月时间
        _date: 0, //当月时间
        initY: 0, //当前 年
        initM: 0, //当前 月
        initD: 0, //当前 日

        cy: 0, //temp 上下年变化
        cm: 0, //temp 上下月变化
        dateYM: 0, // 标题显示


        curMonthDay: 0, // 当月天数
        curWeek: 0,  // 当前是周几
      },
      created: function () {

      },
      mounted: function () {
        this._date = new Date();
        // 初始化 当前时间 y-m-d
        this.initY = this._date.getFullYear()
        this.initM = this._date.getMonth() + 1
        this.initD = this._date.getDate();

        // 初始化&切换上下月使用
        this.cy = this._date.getFullYear()
        this.cm = this._date.getMonth() + 1

        // 标题
        this.dateYM = this.initY + '-' + this.initM

        // 当前日期
      
        this.curMonthDay = this.getGetDate(this.initY, this.initM)
        this.curWeek = this.dayStart(this.initY, this.initM)
 

        //计算上一月天数 填充当月

        this.getPreMonthDay();
      },
      methods: {
        // 当前天数
        getGetDate: function (year, month) {
          var d = new Date(year, month, 0);
          return d.getDate();
        },
        // 获取当月第一周几
        dayStart: function (year, month) {
          var tmpDate = new Date(year, month - 1, 1);
          return (tmpDate.getDay());
        },
        dayFun: function (idx, e) {
          console.log(e.currentTarget)
          alert(idx + 1)
        },
        // 上个月
        upFun: function () {
          this.mChange(-1);
        },
        //下个月
        downFun: function () {
          this.mChange(1);
        },
        mChange: function (m) {
          this._date.setMonth(this._date.getMonth() + m);
          this.dateYM = this._date.getFullYear() + '-' + (this._date.getMonth() + 1);

          // 切换上下月，获取year \ month  
          this.cy = this._date.getFullYear();
          this.cm = this._date.getMonth() + 1;

          // 重组数组 
          this.curMonthDay = this.getGetDate(this.cy, this.cm)
          this.curWeek = this.dayStart(this.cy, this.cm)
  console.log(this.curWeek)

          this.getPreMonthDay();
        },
        //获取上个月天数
        getPreMonthDay: function () {
          // 当前日期
          var cyear = this._date.getFullYear();
          var cMonth = this._date.getMonth();
 
          //2020/8/24
          this.preDate = new Date(cyear, cMonth);
          // 上个月日期
          this.preDate.setMonth(this.preDate.getMonth()-1);

          // alert(this.preDate.getFullYear())
          var getPreDays = this.getGetDate(this.preDate.getFullYear(), this.preDate.getMonth()+1);


          // var ss = this.getGetDate(cyear, cMonth);
          // 填充当月空缺
          // 当月第一天周几
          var preDay = getPreDays - this.curWeek;
          self.tempArr = [];
          for (var i = preDay + 1; i <= getPreDays; i++) {
            self.tempArr.push(i)
          }

          console.log(self.tempArr)
          this.curWeek = self.tempArr;
          // alert(this.curWeek+'-'+cMonth +'-'+ss)
          // var preMonthDays =   this._date.setMonth(this._date.getMonth() -1);


          this.nextMothDay();
        },
        //补下个月天数 6行 每周7天  补全42天

        nextMothDay: function () {
          var total = 42;
          var w = this.curWeek.length;
          var m = this.curMonthDay;
          this.nextDate = total - w - m;
        }
      }
    })
  </script>
</body>

</html>

View Code

简单示例，感觉太多冗余，继续改进及优化

代码区域

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="vue.js"></script>
  <title>日历</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul li {
      list-style: none;
      box-sizing: border-box;
      float: left;
    }

    .calendar-body {
      width: 560px;
      border: 1px solid #ccc;
    }

    .calendar-body ul {
      overflow: hidden;
    }

    .title-month {
      text-align: center;
    }

    .title-month span {
      cursor: pointer;
    }

    .calendar-body .cal-title li {
      width: 80px;
      height: 40px;
      /* border: 1px solid red; */

      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cal-day {}

    .cal-day .day {
      position: relative;
    }

    .cal-day li {
      width: 80px;
      height: 80px;
      /* border: 1px solid red; */

      text-align: center;

    }

    .cal-day li.blue {
      background-color: blue;
      color: #fff;
    }

    .cal-day li.active {
      background-color: #ccc;
      color: #fff;
    }

    .day-num {
      margin-top: 30px;
    }

    .gay {
      color: #ccc;
    }

    .red {
      color: red;
    }
  </style>

</head>

<body>
  <div class="calendar-body">
    <ul class="cal-title">
      <li class="title">日</li>
      <li class="title">一</li>
      <li class="title">二</li>
      <li class="title">三</li>
      <li class="title">四</li>
      <li class="title">五</li>
      <li class="title">六</li>
    </ul>
    <!-- https://www.cnblogs.com/crushxz/p/11330726.html -->
    <p class="title-month"><span @click="upFun">
        < </span>{{dateYM}} <span @click="downFun"> >
      </span></p>

    <ul class="cal-day">
      <template v-for="(item,index) in 42">
        <li v-if="item - beginDay <= 0">
          <p class="day-num gay">{{ item - beginDay + prevMdays }}</p>
        </li>
        <li class="day" :class="{blue: initY==cy && initM==cm && (item - beginDay== initD)}" v-else-if="item - beginDay > 0 && item - beginDay <= nowMdays" @click="dayFun(index, $event)">
          <p class="day-num" >{{ item - beginDay }}</p>
          <!-- <p v-if="((index+1) == initD)&&initY==cy && initM ==cm">今天</p> -->
        </li>
        <li v-else>
          <p class="day-num gay"> {{ item - beginDay - nowMdays }}</p>
        </li>
      </template>
    </ul>
  </div>

  <script>
    var vm = new Vue({
      el: '.calendar-body',
      data: {
        preDate: 0, //上个月时间
        _date: 0,
        initY: 0, //当前 年
        initM: 0, //当前 月
        initD: 0, //当前 日

        cy: 0, //temp 上下年变化
        cm: 0, //temp 上下月变化
        dateYM: 0, // 标题显示


        beginDay: 0, //当月开始是周几
        prevMdays: 0, //上个月总天数
        nowMdays: 0, // 当月天数
      },
      created: function () {

      },
      mounted: function () {
        this._date = new Date();
        // 初始化 当前时间 y-m-d
        this.initY = this._date.getFullYear()
        this.initM = this._date.getMonth() + 1
        this.initD = this._date.getDate();

        // 初始化&切换上下月使用
        this.cy = this._date.getFullYear()
        this.cm = this._date.getMonth() + 1

        // 标题
        this.dateYM = this.initY + '-' + this.initM

        // 当前日期
        this.nowMdays = this.getGetDate(this.initY, this.initM)
        this.beginDay = this.dayStart(this.initY, this.initM) || 7;

        //计算上一月天数 填充当月
        this.getPreMonthDay();
      },
      methods: {
        // 当前天数
        getGetDate: function (year, month) {
          var d = new Date(year, month, 0);
          return d.getDate();
        },
        // 获取当月第一周几
        dayStart: function (year, month) {
          var tmpDate = new Date(year, month - 1, 1);
          return (tmpDate.getDay());
        },
        dayFun: function (idx, e) {
          console.log(e.currentTarget)
          alert(idx + 1)
        },
        // 上个月
        upFun: function () {
          this.mChange(-1);
        },
        //下个月
        downFun: function () {
          this.mChange(1);
        },
        mChange: function (m) {
          this._date.setMonth(this._date.getMonth() + m);
          this.dateYM = this._date.getFullYear() + '-' + (this._date.getMonth() + 1);

          // 切换上下月，获取year \ month  
          this.cy = this._date.getFullYear();
          this.cm = this._date.getMonth() + 1;

 
          this.nowMdays = this.getGetDate(this.cy, this.cm)
          this.beginDay = this.dayStart(this.cy, this.cm) || 7
  console.log(this.beginDay)
          this.getPreMonthDay();
        },
        //获取上个月天数
        getPreMonthDay: function () {
          // 当月
          var cyear = this._date.getFullYear();
          var cMonth = this._date.getMonth();

          this.preDate = new Date(cyear, cMonth);
          this.preDate.setMonth(this.preDate.getMonth());
 
          this.prevMdays = this.getGetDate(this.preDate.getFullYear(), this.preDate.getMonth());
        },
      }
    })
  </script>
</body>

</html>

View Code

posted on 2020-08-21 11:41 Mc525 阅读(676) 评论(0) 编辑收藏举报

刷新页面返回顶部

SeaJson

【日历】自定义（上下月切换）

JavaScript Date 对象

导航

公告