elementui+ <el-date-picker type=“datetime“/>时间组件的当前时间的180天之内的禁止选择处理

需求1如下:当前时间+180天不可选择,180天之后可以选择,之前的时间都禁止选择

页面代码如下:

<el-date-picker

v-model="temp.expire_time"

:picker-options="pickerOption"

type="datetime"

placeholder="选择日期时间"

format="yyyy-MM-dd HH:mm:ss "

value-format="yyyy-MM-dd HH:mm:ss"

/>

pickerOption: {

// 限制只能选择180天以后的时间

disabledDate: (time) => {

return (time.getTime() < Date.now() + 8.64e7 * 180)

}

},

需求2如下:默认选择当前时间的180天的时间,所有时间都可以选择

页面代码同需求1一样,不同的是处理默认选择的时间

methods: {

// 获取当前时间的180天后的时间值

getThreeTime() {

var data = new Date()

var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000 * 180)

var y = Da.getFullYear()

var m = Da.getMonth() + 1

var d = Da.getDate()

var H = Da.getHours()

var mm = Da.getMinutes()

var ss = Da.getSeconds()

m = m < 10 ? '0' + m : m

d = d < 10 ? '0' + d : d

H = H < 10 ? '0' + H : H

return y + '-' + m + '-' + d + ' ' + H + ':' + mm + ':' + ss

},

}

// 授权有效期默认值是180天

编辑的函数中处理如下

if (row.expire_time === null) {

// 授权有效期默认值选择是180天之后的

this.$set(this.temp, 'expire_time', this.getThreeTime());

} else {

this.$set(this.temp, 'expire_time', row.expire_time);

}

以上就是关于年月日时分秒的时间组件的两种需求处理,今天就分享到这里啦!

相关推荐
lyj16899711 分钟前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽2 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头2 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全3 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing3 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆3 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding4 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机4 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人4 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景4 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui