VUE-日期选择器-结束时间>开始时间
功能要求:限制结束时间选择范围,结束时间能够选择的起始日期,随着开始时间的选择而变化,也就是保证结束时间时钟>=开始时间。代码片段:(其中最重要的就是startValue)<script>//定义全局变量:开始协商记录开始日期let startValue = 86400000;export default{data() {...
·
功能要求:
限制结束时间选择范围,结束时间能够选择的起始日期,随着开始时间的选择而变化,也就是保证结束时间时钟>=开始时间。
代码片段:(其中最重要的就是startValue)
<script>
//定义全局变量:开始协商记录开始日期
let startValue = 86400000;
export default{
data() {
//发送开始协商内容
startNegotiateModel: {
projectId: "", //项目id
startTime: "", //项目开始时间
endTime: "", //项目结束时间
negotiateContent: "" //开始协商内容
}
}
}
</script>
<template>
<label>开始时间:</label>
<DatePicker
v-model="startNegotiateModel.startTime"
type="date"
:options="startDateOptions"
@on-change="handleChange"
placeholder="开始时间"
:editable="false"
style="width: 150px"
></DatePicker>
<label class="fromlift">结束时间:</label>
<DatePicker
v-model="startNegotiateModel.endTime"
type="date"
:options="endDateOptions"
placeholder="结束时间"
:editable="false"
style="width: 150px"
></DatePicker>
</template>
methods: {
//开始时间改变事件
handleChange(date) {
startValue = new Date(date).getTime();
this.endDateOptions = {
disabledDate(date) {
return date && date.valueOf() < startValue - 86400000;
}
};
}
}
实现效果:
开始日期选择了:2019-10-21
结束时间,只能选择2019-10-21之后的日期
总结:
不将就,以前做过类似的功能,通常都是在点击确定按钮之后,再去判断结束时间不能小于开始时间,这样做很不友好。这次做这个功能问了好多人,他们给出的建议也是在单击确定之后判断。但是我感觉这是一个时间控件很常见的功能,虽然不知道Vue为什么没有给出明确的解决实例,但是肯定有解决办法,果然功夫不负有心人,特别感谢曹同学的帮助。
更多推荐
已为社区贡献1条内容
所有评论(0)