1. 程式人生 > 實用技巧 >vue 日期選擇器 datepicker 禁用未來的時間

vue 日期選擇器 datepicker 禁用未來的時間

 template

        <el-date-picker
          v-model="form.time"
          type="daterange"
          unlink-panels
          align="right"
          range-separator="至"
          start-placeholder="開始日期"
          end-placeholder="結束日期"
          :picker-options="pickerOptions"
          value-format
="yyyy-MM-dd" style="margin-top: 50px;width: 80%"> </el-date-picker>

data

      pickerOptions: {
        disabledDate (time) {
          // 禁用以後的時間
          return time.getTime() > Date.now() - 8.64e6
        },
        shortcuts: [{
          text: '最近一週',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一個月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 31)
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三個月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 91)
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
            picker.$emit('pick', [start, end])
          }
        }]
      }

快捷輸入日期按需求均提前一天


2020-11-3

一個需求難以完成,先記錄

el-data-picker 開啟時面板是本月和上月而不是本月 和下月

現在


目標

待解決