uniapp uni-datetime-picker结束时间不能高于开始时间,精确到时分秒-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp uni-datetime-picker结束时间不能高于开始时间,精确到时分秒。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近做了个需求需要限制开始时间跟结束时间

类似于问卷出题,问卷的开始时间不能低于当前时间,结束时间必须不能早于开始时间,精确到时分秒

第一步

uni-datetime-picker,vue.js,前端,小程序

在当前页面导入import {dataConversion} from “@/utils/index”;

效果图

uni-datetime-picker,vue.js,前端,小程序第二天结束时间的时分秒可以往前选

当天的结束时间,时分秒只能往后选

代码

在这里插入代码片
<!-- 视图区 -->
				<!-- 开始时间 -->
				<u-form-item :border-bottom="false" label="开始时间:" prop="startTime">
					<view class="example-body">
						<uni-datetime-picker v-model="paperDetail.startTime" type="datetime" returnType="string"
							@change="startTimeChange($event)" :start="startTime" :end="endTime" />
					</view>
				</u-form-item>
				<!-- 结束时间 -->
				<u-form-item :border-bottom="false" label="结束时间:">
					<view class="example-body">
						<uni-datetime-picker v-model="paperDetail.endTime"  type="datetime" returnType="string"
							@change="endTimeChange($event)" :start="startTime" :end="endTime" />
					</view>
				</u-form-item>
<!-- data里的数据 -->
			startTime: dataConversion(new Date()),
			endTime: "2032-04-26",
<!-- 方法 -->
				// 开始时间改变事件
			startTimeChange(val) {
				this.startTime = val
			},
			
			// 结束时间改变事件
			endTimeChange(val) {
			},
<!-- 工具方法 -->	
			export function dataConversion(target) {
			let date = new Date(target);
			let y = date.getFullYear(); // 年
			let MM = date.getMonth() + 1; // 月
			MM = MM < 10 ? ('0' + MM) : MM;
			let d = date.getDate(); // 日
			d = d < 10 ? ('0' + d) : d;
			let h = date.getHours(); // 时
			h = h < 10 ? ('0' + h) : h;
			let m = date.getMinutes(); // 分
			m = m < 10 ? ('0' + m) : m;
			let s = date.getSeconds(); // 秒
			s = s < 10 ? ('0' + s) : s;
			return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
}