calendar，vue+nui app 日历，nui app有月份日历，Calendar 日历优化出月份选择

nui app有月份选择日历

 

 

 

  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");
    },

 

 

 

样式做了小优化

备注：Calendar 日历来源于https://ext.dcloud.net.cn/plugin?id=56，优化使用