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
  },

这样的日历就完成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程宝库。

本文为大家分享了js实现简易计算器的具体代码，供大家参考。最近，博主闲来无聊，就没事用js写了个简易计算器（博主是搞后端的，不是前端>_<）。其实，感觉搞前端的很幸福，自己弄出点东西很有成就感，话不多说，附上 ...