【记录】Vue3 Element-plus 时间控件时间限制

template

<el-date-picker 
  v-model="timing" 
  type="datetime"
  :disabled-date="disableConfig" 
  :disabled-hours="disabledHours"
  :disabled-minutes="disabledMinutes" 
  :disabled-seconds="disabledSeconds"
/>

限制当前时间之前的时间

/* 限制天 */
export const disableConfig = (time) => {
  return time.getTime() < Date.now() - (3600 * 1000 * 24 * 1)
}

/* 限制时 */
export const disabledHours = () => {
  const arrs = []
  for (let i = 0; i < 24; i++) {
  // 限制之前 < 之后 > ，下面同理
     if (new Date().getHours() <= i) continue;
     arrs.push(i)
  }
  return arrs;
}

/* 限制分 */
export const disabledMinutes = () => {
  const arrs = []
  for (let i = 0; i < 60; i++) {
     if (new Date().getMinutes() <= i) continue;
     arrs.push(i)
  }
  return arrs;
}

/* 限制秒 */
export const disabledSeconds = () => {
  const arrs = []
  for (let i = 0; i < 60; i++) {
     if (new Date().getSeconds() <= i) continue;
     arrs.push(i)
  }
  return arrs;
}

限制之后的时间

export const setDisableDate = (time) => {
  return (
    time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000 * 365 * 2 ||
    time.getTime() > new Date().getTime()
  )
}