el-element日期时间组件限制可选时间范围

javascript 复制代码
    <el-date-picker
        v-model="formData.meetingTime"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="width: 100%"
        placeholder="请选择日期"
        clearable
        :picker-options="pickerOptions"
      >
      </el-date-picker>
javascript 复制代码
<script>
	export default {
		data(){
			return{
				//限制当前时间之前的不可选并且最大可选时间不能超过2028-12-31
				 pickerOptions: {
			        disabledDate(time) {
			          const maxDate = new Date('2028-12-31')
			          return time.getTime() > maxDate.getTime() || time.getTime() < new Date().getTime() - 86400000
			        },
			        selectableRange: (() => {   //这里是限制时分秒
			          let data = new Date()
			          let hour = data.getHours()
			          let minute = data.getMinutes()
			          let second = data.getSeconds()
			          return [`${hour}:${minute}:${second} - 23:59:59`]
			        })()
			      },
			}
        }
	}
<script>
相关推荐
難釋懷9 分钟前
Nginx获取客户端真实IP
服务器·前端·nginx
甲维斯29 分钟前
GLM5.2超过Opus4.8Think,全球第二了!
前端·人工智能·ai编程
by————组态31 分钟前
Ricon组态系统 - 新一代Web可视化组态平台
前端·后端·物联网·架构·组态·组态软件
JieE21232 分钟前
手把手带你用纯 CSS 实现一个 3D 旋转魔方,这些前端基础你能打几分?
前端·css·html
lichenyang4531 小时前
鸿蒙 Web 容器(二):H5 和 ArkTS 说话前,先定一份「协议」
前端
JYeontu1 小时前
开箱流水加载动画
前端·javascript·css
RANxy1 小时前
AntV 入门系列:G6 图可视化实战
前端
尽欢i1 小时前
Vue3 customRef 封神教程:防抖、本地存储、自动埋点一套搞定,模板干干净净
前端·javascript·vue.js
VOLUN1 小时前
TypeScript封装通用RESTful BaseAPI,后台接口代码精简80%
前端·javascript