当前位置：首页 > article >正文

el-date-picker设置只有某些日期可选

article 2024/10/11 6:14:17

示例图：

<el-date-picker
   v-model="topFormObj.upTime"
   type="date"
   value-format="timestamp"
   format="dd/MM/yyyy"
   :picker-options="pickerOptions"
/>

固定限制每周的周末+周三不可选

data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          // 使用getDay()方法获取星期几
          return time.getDay() === 6 || time.getDay() === 0 || time.getDay() === 3
        }
      }
    }
}

根据接口返回的日期时间戳设置只有某些日期可选

假设接口返回只有07/10/2024和09/10/2024这两天可以选择，并且返回的时间戳并非0点的。

首先利用new Date(时间戳).setHours(0, 0, 0, 0)方法将时间戳转化为0点的时间戳。

const tt = [new Date(1728440229000).setHours(0, 0, 0, 0), new Date(1728267429000).setHours(0, 0, 0, 0)]

data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return !tt.includes(time.getTime())
        }
      }
    }
}

限制只能选当月或者以后的月份（包括未来的年份），禁止选过去的月份（包括过去的年份）

<el-date-picker
    v-model="topFormObj.upTime"
    type="month"
    value-format="timestamp"
    format="dd/MM/yyyy"
    :picker-options="pickerOptions"
/>

data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          var now = new Date()
          now.setHours(0, 0, 0, 0)
          return time.getTime() < now.getTime()
        }
      }
    }
}