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

最新推荐文章于 2023-07-26 12:12:12 发布

FE-Dong

最新推荐文章于 2023-07-26 12:12:12 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： iview-admin vue 文章标签：日期约束

本文链接：https://blog.youkuaiyun.com/Dong8508/article/details/81875976

vue 同时被 2 个专栏收录

25 篇文章

订阅专栏

iview-admin

4 篇文章

订阅专栏

本文介绍如何在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;
			}
			}
		},