iview时间控件动态不可选日期可选择24小时范围内时间往后退24小时-Toy模板网

这篇具有很好参考价值的文章主要介绍了iview时间控件动态不可选日期可选择24小时范围内时间往后退24小时。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

演示

iview时间控件动态不可选日期可选择24小时范围内时间往后退24小时,VUE,view design

html 设定

起始时间触发on-change 方法
结束时间 options 动态设置不可选择的日期。

<!-- 起始时间 -->
<FormItem :label="$t('startTime')" prop="startTime">
	<DatePicker
		transfer
		type="datetime"
		:placeholder="$t('pleaseSelect') + $t('startTime')"
		format="yyyy-MM-dd HH:mm:ss"
		:options="$config.datetimeOptions"
		v-model="req.startTime"
		@on-change="changeStartTime"
	></DatePicker>
</FormItem>
<!-- 结束时间 -->
<FormItem :label="$t('endTime')" prop="endTime">
	<DatePicker
		transfer
		type="datetime"
		:placeholder="$t('pleaseSelect') + $t('endTime')"
		format="yyyy-MM-dd HH:mm:ss"
		:options="options2"
		v-model="req.endTime"
	></DatePicker>
</FormItem>

设定options2值

disabledDate(date) 内部的date 是时间戳的形式，return 返回的是不想要选的区间范围

注意：

toLocaleDateString 获取的是年月日

toLocaleString 获取年月日时分秒

toLocaleTimeString 获取时分秒

new Date(new Date().toLocaleString()).getTime(); 获取时间戳getTime()

new Date(new Date(_this.req.startTime.toLocaleString()).getTime() + 24 * 60 * 60 * 1000).getTime()) 开始时间选择的往后推24小时

iview时间控件动态不可选日期可选择24小时范围内时间往后退24小时,VUE,view design 文章来源地址https://www.toymoban.com/news/detail-670962.html

computed: {
options2() {
	const _this = this;
	return {
		disabledDate(date) {
			return (
				date &&
				(date.valueOf() < new Date(new Date(_this.req.startTime.toLocaleDateString()).getTime()) ||
					date.valueOf() > new Date(new Date(_this.req.startTime.toLocaleString()).getTime() + 24 * 60 * 60 * 1000).getTime())
			);
		},
	};
},
},

触发changStartTime() 值

结束时间是开始时间的后面24小时

//修改时间
changeStartTime() {
	const { startTime } = this.req;
	this.req.endTime = startTime ? new Date(new Date(startTime.toLocaleString()).getTime() + 24 * 60 * 60 * 1000) : "";
},