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;
}
相关推荐
松树戈42 分钟前
滥用AI生图引起的JavaScript heap out of memory排查记录
vue.js·ai编程
yangzheui3 小时前
【VUE2转VUE3学习笔记】-Day1:模板语法
vue.js·笔记·学习
A_nanda4 小时前
c# 用VUE+elmentPlus生成简单管理系统
javascript·vue.js·c#
北极糊的狐4 小时前
若依项目vue前端启动键入npm run dev 报错:不是内部或外部命令,也不是可运行的程序或批处理文件。
前端·javascript·vue.js
jiayong235 小时前
Vue2 与 Vue3 核心原理对比 - 面试宝典
vue.js·面试·职场和发展
有诺千金5 小时前
VUE3入门很简单(4)---组件通信(props)
前端·javascript·vue.js
2501_944711435 小时前
Vue-路由懒加载与组件懒加载
前端·javascript·vue.js
BYSJMG6 小时前
计算机毕业设计选题推荐:基于Hadoop的城市交通数据可视化系统
大数据·vue.js·hadoop·分布式·后端·信息可视化·课程设计
jiayong236 小时前
Vue2 与 Vue3 常见面试题精选 - 综合宝典
前端·vue.js·面试
BYSJMG6 小时前
Python毕业设计选题推荐:基于大数据的美食数据分析与可视化系统实战
大数据·vue.js·后端·python·数据分析·课程设计·美食