element plus el-date-picker type=“datetime“ 限制年月日 时分秒选择

如何限制el-date-picker组件的时分秒选中!!!!!!!

文档

文档在这里:DateTimePicker 日期时间选择器 | Element Plus

它提供的disabled-date给我们来限制日期选择

nice!!!!!!!!!!!!!!!!!

那小时,分钟,秒呢?咋限制🚫????闷逼!!文档没说呀!!

嗯??disabled-date?是不是小时就是disabled-hours,依此类推其他就是disabled-minutes

聪明!!不过猜对了又咋样?总不能一直靠猜吧!!

怎么想到的呢

上面的时间组件很明显和el-time-picker一样,我是这样猜到的,

看看源码去

element-plus/packages/components/date-picker/src/props/date-picker.ts at dev · element-plus/element-plus · GitHub

解决

template:

复制代码
<el-date-picker 
  v-model="form.time" 
  type="datetime"
  :disabled-date="disableDate" 
  :disabled-hours="disabledHour"
  :disabled-minutes="disabledMinute" 
  :disabled-seconds="disabledSecond"
/>

script:

复制代码
/* 限制天 */
disableDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7;
}

/* 限制小时 */
export const disabledHour = () => {
  const arrs = []
  for (let i = 0; i < 24; i++) {
     if (new Date().getHours() <= i) continue;
     arrs.push(i)
  }
  return arrs;
}

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

/* 限制秒 */
export const disabledSecond = () => {
  const arrs = []
  for (let i = 0; i < 60; i++) {
     if (new Date().getSeconds() <= i) continue;
     arrs.push(i)
  }
  return arrs;
}
相关推荐
小爬的老粉丝9 小时前
Vue 3 文件预览生产排障:Worker/WASM 404、鉴权 Blob 与子路径
javascript·vue.js·wasm
布兰妮甜11 小时前
Vue 状态管理选型:Pinia 完整实战,对比 Vuex,模块化持久化
前端·javascript·vue.js·pinia·vuex
小锋java123411 小时前
【技术专题】Vue3 - 条件渲染
vue.js·vite
JiaLin_Denny18 小时前
Vue3中ref和reactive用法与双向数据绑定
前端·javascript·vue.js
无人生还18 小时前
从 Vue3 到 React · 快速上手系列第 12 篇:并发特性与性能优化
前端·vue.js·react.js
柒@宝儿姐19 小时前
若依 B 端从浏览器访问升级为 Windows 安装包交付流程
前端·javascript·vue.js·windows
达子6661 天前
第26章_HarmonyOs开发图解之 设备管理
vue.js
自然 醒1 天前
v-tooltip自定义指令封装
前端·javascript·vue.js
万敏2 天前
Vue3 全栈实战第四周:watch、nextTick、性能优化与 keep-alive 实战记录
vue.js·node.js·全栈
布兰妮甜2 天前
Vue 大型页面性能优化:四个核心策略
vue.js·性能优化·虚拟滚动·组件缓存·按需加载