最近做了个需求需要限制开始时间跟结束时间
类似于问卷出题,问卷的开始时间不能低于当前时间,结束时间必须不能早于开始时间,精确到时分秒
第一步
在当前页面导入import {dataConversion} from “@/utils/index”;
效果图
第二天结束时间的时分秒可以往前选
当天的结束时间,时分秒只能往后选
代码
在这里插入代码片
<!-- 视图区 -->
<!-- 开始时间 -->
<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;
}
希望能帮助到你们
我是uniapp的小浣熊,也是小火龙大哥,有事直接去群里找小火龙问,他不会了再来找我(手动狗头)