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: "" },