本文例項為大家分享了自定義可選時間日曆元件的具體程式碼，供大家參考，具體內容如下

日曆功能：

1、過去時間不可選擇
2、可自定義不可選時間
3、本月預設展示當天，其他月展示第一天，若為不可選時間，往後順延

效果圖：

-------下面開始表演-----------

**首先，畫www.cppcns.com出日曆頁面佈局，參照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=kjjvBHlfs
 
"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()}/${nkjjvBHlfs
 
ew 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有沒有被濫用

```
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(www.cppcns.comndate,`${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}`) &lkjjvBHlfst; 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.';
export default {
    components:{calendar,alertBox
    },

這樣的日曆就完成了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。