iView中日期DatePicker和时间TimePicker的设置
完成功能:两个DatePicker日期框开始日期大于等于当前日期且小于结束日期,结束日期大于开始日期和当前日期两个TimePicker时间框在开始日期结束日期同一天前提下,开始时间小于结束时间,结束时间大于开始时间vue代码:<FormItem><ul><li class="order_time clear_padding">...
·
完成功能:
两个DatePicker日期框开始日期大于等于当前日期且小于结束日期,结束日期大于开始日期和当前日期
两个TimePicker时间框在开始日期结束日期同一天前提下,开始时间小于结束时间,结束时间大于开始时间
vue代码:
<FormItem>
<ul>
<li class="order_time clear_padding">
<DatePicker
@on-change="startdateChange"
v-model="orderAdd.begin_time_date"
class="order_time_date"
type="date"
placeholder="请选择开始日期"
:options="startDate"
></DatePicker>
<TimePicker
@on-change="startTimeChange"
v-model="orderAdd.begin_time_time"
format="HH:mm"
placeholder="请选择开始时间"
:disabled-hours="startHours"
></TimePicker>
</li>
<li class="order_time clear_padding">
<DatePicker
@on-change="enddateChange"
v-model="orderAdd.end_time_date"
class="order_time_date"
type="date"
placeholder="请选择结束日期"
:options="endDate"
></DatePicker>
<TimePicker
@on-change="endTimeChange"
v-model="orderAdd.end_time_time"
format="HH:mm"
placeholder="请选择结束时间"
:disabled-hours="endHours"
></TimePicker>
</li>
</ul>
</FormItem>
js代码:
export default {
data() {
return {
orderAdd: {
begin_time_date: "",
begin_time_time: "",
end_time_date: "",
end_time_time: "",
begin_time: "",
end_time: "",
},
startDate: {},
endDate: {},
allHours:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
startHours: [],
endHours: [],
}
},
methods: {
startdateChange(e) {
this.orderAdd.begin_time_date = e;
this.endDate = {
disabledDate: date => {
let startTime = this.orderAdd.begin_time_date
? new Date(this.orderAdd.begin_time_date).valueOf()
: "";
return date && date.valueOf() < startTime;
// return date && (date.valueOf() < startTime-86400000 || date.valueOf() > Date.now()-86400000) ; //此约束为当日之前开始日期之后
}
};
},
startTimeChange(e) {
var _this = this;
_this.orderAdd.begin_time_time = e;
if (this.orderAdd.begin_time_date == this.orderAdd.end_time_date && this.orderAdd.begin_time_date != '') {
let ar = _this.allHours.filter(function(elem) {
return elem < Number(_this.orderAdd.begin_time_time.split(":")[0]);
});
_this.endHours = ar;
}
},
enddateChange(e) {
this.orderAdd.end_time_date = e;
this.startDate = {
disabledDate: date => {
let endTime = this.orderAdd.end_time_date
? new Date(this.orderAdd.end_time_date).valueOf() -
1 * 24 * 60 * 60 * 1000
: "";
return (
date &&
(date.valueOf() > endTime || date.valueOf() < Date.now() - 86400000)
); //此约束为当日之前开始日期之后
}
};
},
endTimeChange(e) {
var _this = this;
_this.orderAdd.end_time_time = e;
if (this.orderAdd.begin_time_date == this.orderAdd.end_time_date && this.orderAdd.begin_time_date != '') {
let ar = _this.allHours.filter(function(elem) {
return elem > Number(_this.orderAdd.end_time_time.split(":")[0]);
});
_this.startHours = ar;
}
},
},
mounted() {
var _this = this;
// 刚进页面就加载预约开始时间不得小于当前时间
this.startDate = {
disabledDate: date => {
return date && date.valueOf() < Date.now() - 86400000; //此约束为当日之前开始日期之后
}
};
// 刚进页面就加载预约结束时间不得小于当前时间+1天
this.endDate = {
disabledDate: date => {
return date && date.valueOf() < Date.now(); //此约束为当日之前开始日期之后
}
};
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)