vue自定義可選時間的日歷組件

更新時間：2021年08月16日 17:09:24 作者：年輕人不年輕

這篇文章主要為大家詳細(xì)介紹了vue自定義可選時間的日歷組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue自定義可選時間日歷組件的具體代碼，供大家參考，具體內(nèi)容如下

日歷功能：

1、過去時間不可選擇
2、可自定義不可選時間
3、本月默認(rèn)展示當(dāng)天，其他月展示第一天，若為不可選時間，往后順延

效果圖：

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

**首先，畫出日歷頁面布局，參照win10系統(tǒng)日歷布局*6行7列，為何如此，請自行理解…*本人也是“偷窺”來的

beginDay是當(dāng)前月第一天的周幾，prevMdays是上個月總天數(shù)，nowMdays是當(dāng)月總天數(shù)，這樣就實(shí)現(xiàn)了日歷的展示效果，標(biāo)簽中綁入一些可能會用到的數(shù)據(jù) 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>

—接下來…

所用到的數(shù)據(jù)：

*active-day是高亮的那一天即選中日期，curDate控制選中哪一天，這里默認(rèn)當(dāng)天，開放一個props數(shù)據(jù)timeArry,允許傳入一些自定義日期作為不可選，點(diǎn)擊的日期中綁定的dates存在于數(shù)組中則返回，可選擇的情況下通過$emit將選擇的結(jié)果通過chooseDate事件暴露出去。

//點(diǎn)擊切換日
 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++;
      }
},

對切換月、日都要進(jìn)行觀測，重點(diǎn)在于觀測月份變化，也不知道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("不存在數(shù)值，停止，日期停留在" + i);
            ndate = i;
            break;
          }
        }
        console.log(ndate, `${this.year}/${this.month}/${ndate}`);
        //用切換到的月和本日相比較，未來月默認(rèn)選中1號，當(dāng)月選中當(dāng)天
        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
        );
      }
    }
  },

父組件中調(diào)用

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

這樣的日歷就完成了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: