calendar，vue+nui app 日歷，nui app有月份日歷，Calendar 日歷優化出月份選擇

nui app有月份選擇日歷

 

 

 

  <uni-calendar
        ref="calendar"
        :date="date"
        :topTabCur="topTabCur"
        :insert="false"
        :lunar="false"
        :disable-before="true"
        :showMonth="false"
        :start-date="startDate"
        :end-date="endDate"
        :clearDate="false"
        @confirm="confirmCalendar"
      />

 

打開日歷

 toggleCalendar() {
      // this.showUniCalendar = !this.showUniCalendar
      const showStatus = this.$refs.calendar.show
      showStatus ? this.$refs.calendar.close() : this.$refs.calendar.open()
      if (!showStatus && this.selectedDate) {
        this.date = ''
        this.date =
          this.topTabCur === 0 ? this.lastChoiceDate : this.lastChoiceMonth
      }
    },

  //獲取回調的日期數據
    confirmCalendar(selected) {
      const { fulldate, clearFlag } = selected
      switch (this.topTabCur) {
        case 0:
          this.lastChoiceDate = clearFlag ? '' : fulldate
          this.date = this.lastChoiceDate
          this.selectedDate = clearFlag ? '' : `${fulldate.replace(/-/g, '')}`
          break
        case 1:
          this.lastChoiceMonth = clearFlag ? '' : fulldate
          this.date = this.lastChoiceMonth
          this.selectedMonth = clearFlag
            ? ''
            : `${fulldate.replace(/-/g, '').substring(0, 6)}`
          break
        default:
      }
    },

 

//切換日和月查詢
    tabClick(i) {
      this.topTabCur = i
      this.$set(this, 'topTabCur', i)

      this.$refs.calendar.changeTopTabCur(i)
      // this.date = ''
      this.date =
        this.topTabCur === 0 ? this.lastChoiceDate : this.lastChoiceMonth
      // this.$emit("changeTopTabCur");
    },

 

 

<template>
  <view class="uni-calendar">
    <view
      v-if="!insert&&show"
      class="uni-calendar__mask"
      :class="{'uni-calendar--mask-show':aniMaskShow}"
      @click="clean"
    ></view>
    <view
      v-if="insert || show"
      class="uni-calendar__content"
      :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}"
    >

      <view class="uni-calendar__header">
        <view class="uni-calendar__header-btn-box" @click.stop="preYear">
          <view class="uni-calendar__header-btn uni-calendar--left"></view>
          <view class="uni-calendar__header-btn min uni-calendar--left"></view>
        </view>
        <view v-if="!showMonthBoxs" class="uni-calendar__header-btn-box" @click.stop="pre">
          <view class="uni-calendar__header-btn uni-calendar--left"></view>
        </view>
          <text
          class="uni-calendar__header-text"
          @click="showMonthBox"
          v-if="!showMonthBoxs"
        >{{ (nowDate.year||'') +'年'+( nowDate.month||'') +'月'}}</text>
        <text
          class="uni-calendar__header-text"
          @click="showMonthBox"
          v-if="showMonthBoxs"
        >{{ (nowDate.year||'') +'年'}}</text>

        <!-- </picker> -->
        <view v-if="!showMonthBoxs" class="uni-calendar__header-btn-box" @click.stop="next">
          <view class="uni-calendar__header-btn uni-calendar--right"></view>
        </view>
        <view class="uni-calendar__header-btn-box" @click.stop="nextYear">
          <view class="uni-calendar__header-btn min uni-calendar--right"></view>
          <view class="uni-calendar__header-btn uni-calendar--right"></view>
        </view>
        <!-- <text class="uni-calendar__backtoday" @click="backtoday">回到今天</text> -->
      </view>
      <view v-if="!showMonthBoxs" class="uni-calendar__box">
        <view v-if="showMonth" class="uni-calendar__box-bg">
          <text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
        </view>
        <view class="uni-calendar__weeks">
          <view class="uni-calendar__weeks-day">
            <text class="uni-calendar__weeks-day-text">日</text>
          </view>
          <view class="uni-calendar__weeks-day">
            <text class="uni-calendar__weeks-day-text">一</text>
          </view>
          <view class="uni-calendar__weeks-day">
            <text class="uni-calendar__weeks-day-text">二</text>
          </view>
          <view class="uni-calendar__weeks-day">
            <text class="uni-calendar__weeks-day-text">三</text>
          </view>
          <view class="uni-calendar__weeks-day">
            <text class="uni-calendar__weeks-day-text">四</text>
          </view>
          <view class="uni-calendar__weeks-day">
            <text class="uni-calendar__weeks-day-text">五</text>
          </view>
          <view class="uni-calendar__weeks-day">
            <text class="uni-calendar__weeks-day-text">六</text>
          </view>
        </view>
        <view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
          <!-- <view v-if="weekIndex<30"> -->
          <view
            class="uni-calendar__weeks-item"
            v-for="(weeks,weeksIndex) in item"
            :key="weeksIndex"
          >
            <calendar-item
              :weeks="weeks"
              :calendar="calendar"
              :selected="selected"
              :lunar="lunar"
              :date="date"
              @change="choiceDate"
            ></calendar-item>
          </view>
          <!-- </view> -->
        </view>
      </view>
      <view v-else class="uni-calendar__box text-center fs18 fc6 padding-tb-sm">
        <view class="calendar__month">
          <view class="calendar-item__wrapper"       
            v-for="(month,monthIndex) in 12"
            :key="monthIndex">
            <view
                class="calendar-item"
                :class="{
                  'isDay-text': nowDate.month == month && nowDate.year == calendar.year ,
                  'checked': nowDate.month == month && nowDate.year == calendar.year && date,
                  'disable': disabledMonth(month)
                }"
                @click="changeMonth(month)"
              >{{month}}月</view>
          </view>
        </view>
      </view>
      <view class="clear-btn"  @click="clear">
        清空
      </view>
    </view>
  </view>
</template>

<script>
import Calendar from "./util.js";
import calendarItem from "./uni-calendar-item.vue";
/**
 * Calendar 日歷
 * @description 日歷組件可以查看日期，選擇任意范圍內的日期，打點操作。常用場景如：酒店日期預訂、火車機票選擇購買日期、上下班打卡等
 * @tutorial https://ext.dcloud.net.cn/plugin?id=56
 * @property {String} date 自定義當前時間，默認為今天
 * @property {Boolean} lunar 顯示農歷
 * @property {String} startDate 日期選擇范圍-開始日期
 * @property {String} endDate 日期選擇范圍-結束日期
 * @property {Boolean} range 范圍選擇
 * @property {Boolean} insert = [true|false] 插入模式,默認為false
 *     @value true 彈窗模式
 *     @value false 插入模式
 * @property {Boolean} clearDate = [true|false] 彈窗模式是否清空上次選擇內容
 * @property {Array} selected 打點，期待格式[{date: '2019-06-27', info: '簽到', data: { custom: '自定義信息', name: '自定義消息頭',xxx:xxx... }}]
 * @property {Boolean} showMonth 是否選擇月份為背景
 * @event {Function} change 日期改變，`insert :ture` 時生效
 * @event {Function} confirm 確認選擇`insert :false` 時生效
 * @event {Function} monthSwitch 切換月份時觸發
 * @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
 */
export default {
  components: {
    calendarItem
  },
  props: {
    date: {
      type: String,
      default: ""
    },
    selected: {
      type: Array,
      default() {
        return [];
      }
    },
    topTabCur: {
      type: Number,
      default: 0
    },
    lunar: {
      type: Boolean,
      default: false
    },
    startDate: {
      type: String,
      default: ""
    },
    endDate: {
      type: String,
      default: ""
    },
    range: {
      type: Boolean,
      default: false
    },
    insert: {
      type: Boolean,
      default: true
    },
    showMonth: {
      type: Boolean,
      default: true
    },
    clearDate: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      show: false,
      weeks: [],
      calendar: {},
      nowDate: "",
      aniMaskShow: false,
      showMonthBoxs: false,
    };
  },
  watch: {
    date(newVal) {
      this.cale.setDate(newVal);
      this.init(this.cale.selectDate.fullDate);
    },
    startDate(val) {
      this.cale.resetSatrtDate(val);
    },
    endDate(val) {
      this.cale.resetEndDate(val);
    },
    selected(newVal) {
      this.cale.setSelectInfo(this.nowDate.fullDate, newVal);
      this.weeks = this.cale.weeks;
      //   this.weeks.splice(0,4);
    }
  },
  created() {
    // 獲取日歷方法實例
    this.cale = new Calendar({
      // date: new Date(),
      selected: this.selected,
      startDate: this.startDate,
      endDate: this.endDate,
      range: this.range
    });
    // 選中某一天
    this.cale.setDate(this.date);
    this.init(this.cale.selectDate.fullDate);
    // this.setDay
  },
  methods: {
    // 取消穿透
    clean() {
      if (!this.insert) {
        this.close()
      }
    },
    bindDateChange(e) {
      const value = e.detail.value + "-1";
      this.cale.setDate(value);
      this.init(value);
    },
    /**
     * 初始化日期顯示
     * @param {Object} date
     */
    init(date) {
      this.nowDate = this.calendar = this.cale.getInfo(date);
      if (this.topTabCur == 1) {
        this.showMonthBox();
      } else {
        this.weeks = this.cale.weeks;
      }
    },
    /**
     * 打開日歷彈窗
     */
    open() {
      // 彈窗模式並且清理數據
      if (this.clearDate && !this.insert) {
        this.cale.cleanMultipleStatus();
        this.cale.setDate(this.date);
        this.init(this.cale.selectDate.fullDate);
      }
      this.show = true;
      this.$nextTick(() => {
        setTimeout(() => {
          this.aniMaskShow = true;
        }, 50);
      });
    },
    /**
     * 關閉日歷彈窗
     */
    close() {
      this.aniMaskShow = false;
      this.$nextTick(() => {
        setTimeout(() => {
          this.show = false;
          this.$emit("close");
        }, 300);
      });
    },
    /**
     * 確認按鈕
     */
    confirm() {
      this.setEmit("confirm");
      this.close();
    },
    changeTopTabCur(t) {
      if (t == 1) {
        this.showMonthBoxs = true;
      } else {
        this.showMonthBoxs = false;
        this.weeks = this.cale.weeks;
      }
    },
    /**
     * 變化觸發
     */
    change() {
      if (!this.insert) return;
      this.setEmit("change");
    },
    /**
     * 選擇月份觸發
     */
    monthSwitch() {
      let { year, month } = this.nowDate;
      this.$emit("monthSwitch", {
        year,
        month: Number(month)
      });
    },
    /**
     * 派發事件
     * @param {Object} name
     */
    setEmit(name) {
      let { year, month, date, fullDate, lunar, extraInfo, clearFlag=false } = this.calendar;
      this.$emit(name, {
        clearFlag,
        topTabCur: this.topTabCur,
        range: this.cale.multipleStatus,
        year,
        month,
        date,
        fulldate: fullDate,
        lunar,
        extraInfo: extraInfo || {}
      });
    },
    /**
     * 選擇天觸發
     * @param {Object} weeks
     */
    choiceDate(weeks) {
      if (weeks.disable) return;
      this.calendar = weeks;
      // 設置多選
      this.cale.setMultiple(this.calendar.fullDate);
      this.weeks = this.cale.weeks;
      this.setEmit("confirm");
      this.close();
      this.change();
    },
    /**
     * 回到今天
     */
    backtoday() {
      let date = this.cale.getDate(new Date()).fullDate;
      this.cale.setDate(date);
      this.init(date);
      this.change();
    },
    /**
     * 上個月
     */
    pre() {
      const preDate = this.cale.getDate(this.nowDate.fullDate, -1, "month")
        .fullDate;
      this.setDate(preDate);
      this.monthSwitch();
    },
    /**
     * 下個月
     */
    next() {
      const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, "month")
        .fullDate;
      this.setDate(nextDate);
      this.monthSwitch();
    },
    /**
     * 上一年
     */
    preYear() {
      const preDate = this.cale.getDate(this.nowDate.fullDate, -1, "year")
        .fullDate;
      this.setDate(preDate);
      this.monthSwitch();
    },
    /**
     * 下一年
     */
    nextYear() {
      const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, "year")
        .fullDate;
      this.setDate(nextDate);
      this.monthSwitch();
    },
    /**
     * 設置日期
     * @param {Object} date
     */
    setDate(date) {
      this.cale.setDate(date);
      this.weeks = this.cale.weeks;
      //   this.weeks.splice(0,4);
      this.nowDate = this.cale.getInfo(date);
    },
    showMonthBox() {
      this.showMonthBoxs = true;
    },
    disabledMonth(month) {
      const endYear = new Date(this.endDate).getFullYear()
      const endMonth = new Date(this.endDate).getMonth()+1
      return this.nowDate.year > endYear || (this.nowDate.year === endYear && month >= endMonth)
    },
    changeMonth(m) {
      if (this.disabledMonth(m)) return
      let { year, month } = this.nowDate;
      let n = m - month;
      const nextDate = this.cale.getDate(this.nowDate.fullDate, n, "month")
        .fullDate;
      const newDate = `${nextDate.substring(0, 8)}01`
      this.setDate(newDate);
      this.monthSwitch();
      if (this.topTabCur == 1) {
        this.calendar = this.cale.getInfo(newDate);
        // 設置多選
        this.cale.setMultiple(this.calendar.fullDate);
        this.weeks = this.cale.weeks;
        this.setEmit("confirm");
        this.close();
        this.change();
      } else {
        this.showMonthBoxs = false;
      }
    },
    clear() {
      // const year = new Date().getFullYear()
      // const month = new Date().getMonth() + 1
      // const date = new Date().getDate()
      // const today = `${year}-${month >= 10 ? month : '0' + month}-${date >= 10 ? date : '0' + date}`
      // // debugger
      // this.setDate(today);
      // this.calendar = this.cale.getInfo(today);
      // this.calendar.clearFlag = true
      // // 設置多選
      // this.weeks = this.cale.weeks;
      // this.setEmit("confirm");
      // this.close();
      // this.change();

      this.backtoday()
      this.calendar.clearFlag = true
      this.setEmit("confirm");
      this.close();
    }
  }
};
</script>

 

樣式做了小優化

備注：Calendar 日歷來源於https://ext.dcloud.net.cn/plugin?id=56，優化使用