element picker-options控制時間只能選取指定範圍日期

 需求:

用戶只能創建當前的月報,如果當年已有月份有了月報那麼這個月也不可以建月報

 <el-form-item label="月份:" :prop="isdisabled?'':'stateDate'">
              <el-date-picker
                v-model="ruleForm.stateDate"
                value-format="yyyy-MM"
                format="yyyy-MM"
                class="control"
                type="month"
                placeholder="選擇月"
                :picker-options="pickerOptions"
              />
            </el-form-item>
 const pastMonthList = []
        const date = new Date()
        const curYear = date.getFullYear()
if (params.year < curYear) {
            for (let i = 1; i <= 12; i++) {
              // 年份與月份拼成數組
              pastMonthList.push(`${params.year}-${i < 10 ? '0' + i : i}`)
            }
            this.creatDateList = pastMonthList.filter((m, idx) => {
              // 返回沒有匹配上的日期,allMon爲後臺返回的月份
              return allMon.indexOf(m) === -1
            })
          } else {
            //currentMonth這當年及當月之前所有月份
            this.creatDateList = currentMonth().filter((m, idx) => {
              // 返回沒有匹配上的日期
              return allMon.indexOf(m) === -1
            })
          }

 

  pickerOptions: {
          disabledDate: (time) => {
            const year = time.getFullYear()
            let month = time.getMonth() + 1
            if (month < 10) month = '0' + month
            const ym = year + '-' + month
            // 把所有年月和需要建立的月份匹配,把沒有匹配上的返回出去,讓月份選擇器可選
            return !this.creatDateList.includes(ym)
          }
        },

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章