<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
@change="changeDate"
>
</el-date-picker>
data() {
let that = this;
return {
pickerOptions: {
//限制只能选择一年时间
disabledDate(time) {
if (!that.dateRange || that.dateRange[0] == null) return false;
let chosedDate = new Date(that.dateRange[0]);
let startyear = chosedDate.getFullYear() - 1;
let endYear = chosedDate.getFullYear() + 1;
let endDate =
endYear +
"-" +
(chosedDate.getMonth() + 1) +
"-" +
chosedDate.getDate();
let startDate =
startyear +
"-" +
(chosedDate.getMonth() + 1) +
"-" +
chosedDate.getDate();
let _endDate = new Date(endDate);
let _startDate = new Date(startDate);
//即大于开始时间小于结束时间
return (
time.getTime() > _endDate.getTime() ||
time.getTime() < _startDate.getTime()
);
},
onPick({maxDate, minDate}) {
console.log('maxDate:', maxDate);
//重新设置开始时间
if (!minDate) {
minDate = new Date();
}
that.dateRange = [minDate];
},
},
dateRange: [],
};
},
methods:{
// 时间选择器切换
changeDate(list) {
if(!list)return; // 点击叉号也会改变时间,需判断list是否为null
this.activeTime = '';
this.form.startTime = list[0];
this.form.endTime = list[1];
this.form.start = 1;
this.search();
},
}
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。