vue自定义可选时间的日历组件

本文实例为大家分享了vue自定义可选时间日历组件的具体代码，供大家参考，具体内容如下

日历功能：

1、过去时间不可选择 2、可自定义不可选时间 3、本月默认展示当天，其他月展示第一天，若为不可选时间，往后顺延

效果图：

-------下面开始表演-----------

**首先，画出日历页面布局，参照win10系统日历布局*6行7列，为何如此，请自行理解…*本人也是“偷窥”来的

beginDay是当前月第一天的周几，prevMdays是上个月总天数，nowMdays是当月总天数，这样就实现了日历的展示效果，标签中绑入一些可能会用到的数据 data-dates等

<div class="dateContent-body-day" v-for="item in 42" :key="item">
            <div
              v-if="item - beginDay > 0 && item - beginDay <= nowMdays"
              :class="{
                'active-day': `${year}/${month}/${item - beginDay}` == curDate
              }"
              @click="dayHandler"
              :data-year="year"
              :data-month="month"
              :data-day="item - beginDay"
              :data-dates="year + '/' + month + '/' + (item - beginDay)"
            >
              {{ item - beginDay }}
            </div>
            <div class="other-day" v-else-if="item - beginDay <= 0">
              {{ item - beginDay + prevMdays }}
    </div>
  <div class="other-day" v-else>{{ item - beginDay - nowMdays }}</div>
</div>

—接下来…

所用到的数据：

*active-day是高亮的那一天即选中日期，curDate控制选中哪一天，这里默认当天，开放一个props数据timeArry,允许传入一些自定义日期作为不可选，点击的日期中绑定的dates存在于数组中则返回，可选择的情况下通过$emit将选择的结果通过chooseDate事件暴露出去。

//点击切换日
 dayHandler(e) {
      console.log(e);
      var daNum = e.target.dataset;
      if (this.cantTime.indexOf(daNum.dates) > -1) {
        this.$toast("非开放日期，不可选取");
        return;
      }
      if (
        `${daNum.year}/${daNum.month}/${daNum.day}` >=
        `${new Date().getFullYear()}/${new Date().getMonth() +
          1}/${new Date().getDate()}`
      ) {
        this.date = e.target.dataset.day;
        this.$emit(
          "chooseDate",
          this.year + "/" + this.month + "/" + this.date
        );
      } else {
        this.$toast("过去时间不可选取");
      }
    },
    //切换下月
``nextMonth() {
      if (this.month == 12) {
        this.month = 1;
        this.year++;
      } else {
        this.month++;
      }
},

对切换月、日都要进行观测，重点在于观测月份变化，也不知道watch有没有被滥用

```javascript
watch: {
    date(val, oldval) {
      if (val) {
        this.curDate = `${this.year}/${this.month}/${this.date}`;
      }
    },
    month(val, oldval) {
      if (val) {
        var ndate;
        for (var i = 1; i <= 31; i++) {
          console.log(`${this.year}/${this.month}/${i}`);
          if (this.cantTime.indexOf(`${this.year}/${this.month}/${i}`) < 0) {
            console.log("不存在数值，停止，日期停留在" + i);
            ndate = i;
            break;
          }
        }
        console.log(ndate, `${this.year}/${this.month}/${ndate}`);
        //用切换到的月和本日相比较，未来月默认选中1号，当月选中当天
        if (
          `${this.year}/${this.month}/1` >
          `${new Date().getFullYear()}/${new Date().getMonth() +
            1}/${new Date().getDate()}`
        ) {
          this.curDate = `${this.year}/${this.month}/${ndate}`;
          this.date = ndate;
        } else {
          for (var i = new Date().getDate(); i <= 31; i++) {
            console.log(2`${this.year}/${this.month}/${i}`);
            if (this.cantTime.indexOf(`${this.year}/${this.month}/${i}`) < 0) {
              this.curDate = `${new Date().getFullYear()}/${new Date().getMonth() +
            1}/${i}`;
          this.date = i;
              break;
            }
          }
        }
        this.$emit(
          "chooseDate",
          this.year + "/" + this.month + "/" + this.date
        );
      }
    }
  },

父组件中调用

<calendar :timeArry="timeArray" @chooseDate="chooseHandler"></calendar>
import { calendar ,alertBox} from '@/components/index.js';
export default {
    components:{calendar,alertBox
    },

这样的日历就完成了。

本文vue自定义可选时间的日历组件到此结束。失去灯火之后不必慌乱，你还可以看见满天的繁星。小编再次感谢大家对我们的支持！