477
社区成员
发帖
与我相关
我的任务
分享关于iview的DatePicker组件禁用时间的问题
两个日期选择框，设置起止时间，时间可选范围是6个小时，譬如我选开始时间选择2019-04-01 00:00:00，结束时间可选只能是2019-04-01 00:00:00至2019-04-01 06:00:00，有一个问题就是当我开始时间选择2019-04-01 22:00:00时，第二个日期选择器可选时间范围是2019-04-01 00:00:00 至 2019-04-01 04:00:00，问题就是我无法选择2019-04-01 22:00:00 至 2019-04-01 23:59:59 中的任意一时间，同理我先选第二个选择框设置截止时间，设置开始时间时也会有同样的问题。
<template>
<div id="app">
<Row>
<Col span="12">
<DatePicker
type="datetime"
v-model="pointDTO.startTime"
:options="startOptions"
placeholder="Select date"
style="width: 200px"></DatePicker>
</Col>
<Col span="12">
<DatePicker
type="datetime"
v-model="pointDTO.endTime"
:options="endOptions"
placeholder="Select date"
style="width: 200px"></DatePicker>
</Col>
</Row>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
pointDTO: {
startTime: '',
endTime: '',
}
}
},
components: {
},
methods: {
getMsg(msg) {
alert(msg);
}
},
computed: {
startOptions() {
const THIS = this;
return {
disabledDate(date) {
const dateVal = date.valueOf();
if (!THIS.pointDTO.endTime) {
return dateVal > Date.now();
}
return dateVal > THIS.pointDTO.endTime.valueOf() || dateVal < THIS.pointDTO.endTime.valueOf() - 21600000;
},
};
},
endOptions() {
const THIS = this;
return {
disabledDate(date) {
const dateVal = date.valueOf();
if (!THIS.pointDTO.startTime) {
return dateVal > Date.now();
}
return dateVal < THIS.pointDTO.startTime.valueOf() || dateVal > THIS.pointDTO.startTime.valueOf() + 21600000;
},
};
},
},
}
</script>
...全文
请发表友善的回复…
发表回复
weixin_38098817 2019-04-17
- 打赏
- 举报
我断点时发现 disabledDate(date) 这个date参数是从每天的00:00:00，没有精确到小时，所以无法实现小时的比较？
image.png831×222 10.2 KB
