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 分钟前
从0到1落地AI知识问答系统(一):AI结对协作实战技巧
vue.js·node.js·全栈
摇滚侠13 小时前
SpringBoot3+Vue3 全套视频教程 45-51
前端·javascript·vue.js
星河耀银海15 小时前
框架结合:Vue+HTML5+AI实现智能前端应用开发
前端·vue.js·html5
英勇无比的消炎药16 小时前
还在手写对话面板?TinyRobot Container 一个组件装下整个 AI 聊天
vue.js
不甘平凡的小鸟16 小时前
Element-UI记录
javascript·vue.js·ui·elementui
用户29307509766917 小时前
流式输出:Vue 3 + DeepSeek API 实战
vue.js
先吃饱再说17 小时前
流式输出完全指南:让 AI 对话像打字机一样流畅
javascript·vue.js
OpenTiny社区18 小时前
TinyEngine 2.11 重磅更新!AI 深度嵌入画布,Vue 项目一键转换成 DSL
前端·vue.js·人工智能·ai编程·opentiny·tinyengine
小小编程路20 小时前
C++ 块作用域详解:从基础到实战
前端·javascript·vue.js
虚惊一场21 小时前
MarkView:纯前端 Markdown 实时预览工具的架构设计
前端·javascript·vue.js