iview-admin 日期时间段约束 及针对日期控件的处理。

本文介绍如何在iview-admin中实现日期时间段约束,并提供针对日期控件的数据处理方法。通过`:value`进行双向绑定,`@on-change`事件处理选择后的数据格式,`format`设置日期展示格式,以及`:options`设定约束规则。

1、直接上代码。

  • :value="form.regiestTimeStart"  用于数据的双向绑定

  •  @on-change="timeFormatStar" 选择时间后,针对数据进行转换,用于数据提交

  • format="yyyy-MM-dd HH:mm:ss" 指定数据展示格式

  • :options="startTimeOptions" 设置规则(时间段)

<Col span="4">注册时间:</Col>
	<Col span="8">
	<DatePicker type="date" :value="form.regiestTimeStart"  @on-change="timeFormatStar" format="yyyy-MM-dd HH:mm:ss" :options="startTimeOptions"  placeholder="Select date"></DatePicker>
</Col>
<Col  span="2">-</Col>
<Col span="8">
	<DatePicker type="date"  :value="form.regiestTimeEnd" @on-change="timeFormatEnd" format="yyyy-MM-dd HH:mm:ss"  :options="endTimeOptions" placeholder="Select date"></DatePicker>
</Col>

2、js代码

	return {
			startTimeOptions: {}, //开始日期设置
			endTimeOptions: {}, //结束日期设置
			
			form:{
				regiestTimeStart:"",
				regiestTimeEnd:"",
			}
		}
	},


//添加方法:

	timeFormatStar(e){
			this.form.regiestTimeStart = e;
				this.endTimeOptions = {
			disabledDate: date => {
				let startTime = this.form.regiestTimeStart ? new Date(this.form.regiestTimeStart).valueOf() : '';
				return date && (date.valueOf() < startTime);
			}
			}
		},
		timeFormatEnd(e){
			this.form.regiestTimeEnd = e;
			let endTime = this.form.regiestTimeEnd? new Date(this.form.regiestTimeEnd).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
			this.startTimeOptions = {
			disabledDate(date) {
				return date && date.valueOf() > endTime;
			}
			}
		},

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值