element ui 日期选择(开始到结束一个月限制)
开始时间—结束时间
<FormItem label="统计时间" prop="startDate" label-position="left" :label-width="78">
<DatePicker
transfer
:editable="false"
style="width:170px"
type="date"
placement="bottom-end"
v-model="formItem.startDate"
placeholder="请选择开始时间"
:options="startDateOption"
:clearable="false"
@on-change="(startdate,type)=>onStartDateChange(startdate,type,'formItem')"
></DatePicker>到
</FormItem>
<FormItem prop="endDate">
<DatePicker
transfer
:editable="false"
style="width:170px"
type="date"
placement="bottom-end"
v-model="formItem.endDate"
placeholder="请选择结束时间"
:clearable="false"
:options="renderEndDateOption('formItem')"
></DatePicker>
</FormItem>
开始时间选择器
startDateOption: {
disabledDate (date) {
return date && date.valueOf() > Date.now();
}
},
开始时间的change事件
onStartDateChange (startDate, type, formitem) {
let dateTime = 1000 * 60 * 60 * 24; //每一天的毫秒数
if (
this[formitem].endDate < new Date(startDate + " 00:00:00") ||
Math.floor(
(this[formitem].endDate.getTime() -
new Date(startDate + " 00:00:00").getTime()) /
dateTime
) > 30
) {
this[formitem].endDate = "";
}
},
结束时间选择器
renderEndDateOption (formitem) {
let dateTime = 1000 * 60 * 60 * 24;
return {
disabledDate: date => {
return (
date &&
(date.valueOf() > Date.now() ||
date < this[formitem].startDate ||
Math.floor(
(date.getTime() -
new Date(
formatDate("yyyy-MM-dd", this[formitem].startDate) +
" 00:00:00"
).getTime()) /
dateTime
) > 30)
);
}
};
},
默认当前一周的数据
formItem: {
startDate: new Date(new Date().getTime() - 3600 * 1000 * 24 * 6),
endDate: new Date(),
provinceNo: "",
regionNo: ""
},

浙公网安备 33010602011771号