• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

elementui 日期时间选择器 只能选择当前时间:后的时间

武飞扬头像
webCandy
帮助1

elementui 日期时间选择器 只能选择当前时间之后的时间

日期时间选择器禁止选择当前时间之前的时间,但是点击确认时是当前时间


前言

学新通

一、设置时间范围

<el-date-picker
type="datetime"
:picker-options="expireTimeOPtion"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择截止时间"
v-model="ruleForm.time"
@focus="focus"
:default-value="defaultValue"
></el-date-picker>
data(){
	return{
		expireTimeOPtion: {
			disabledDate(time) {
				return time.getTime() < Date.now() //如果没有后面的-8.64e7就是不可以选择今天的
			},
		},
	}
}

二、去掉此刻按钮

focus() {
	this.$nextTick(() => {
		document.getElementsByClassName('el-button--text')[0].setAttribute('style','display:none')
	})
}

我以为我这样可以了,但是当我不选择日期就点击确认的时候就会显示当前时间,所以为了避免这个问题便有了第三步,虽然不是什么好办法,但是能解决燃眉之急

三、设置默认值

data(){
	return{
		defaultValue:'',
	}
}
created(){
	this.defaultValue =this.getTomorrowTime()
}
// 获取明天时间
getTomorrowTime() {
	const yy = new Date().getFullYear()
	const MM = new Date().getMonth()   1 < 10? '0'   (new Date().getMonth()   1): new Date().getMonth()   1
	const dd = new Date().getDate() < 10 ? '0'   new Date().getDate() : new Date().getDate()
	const HH = new Date().getHours() < 10 ? '0'   new Date().getHours() : new Date().getHours()
	const mm = new Date().getMinutes() < 10 ? '0'   new Date().getMinutes() : new Date().getMinutes()
	const ss = new Date().getSeconds() < 10 ? '0'   new Date().getSeconds() : new Date().getSeconds()
	return yy   '-'   MM   '-'   (dd 1)   ' '   HH   ':'   mm   ':'   ss		
},

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhggjjgg
系列文章
更多 icon
同类精品
更多 icon
继续加载