使用ElementUI中的el-date-picker时间选择器标签实现选择时间范围为一个月。 此方法会根据选择的第一个时间进行前面12个月时间范围和后面12个月时间范围的限制。 但此方法对于一下子选择很前时间段的操作有着很大的限制,需要一点点的往前选择移动。
<el-date-picker
v-model="monthValue"
type="monthrange"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
value-format='yyyy-MM'
@change="getDateTime"
:picker-options="pickerOptions"
style="background-color: #000843; border: 0px">
</el-date-picker>
<script>
export default{
data() {
return {
monthValue: '',
key: 0,
pickerOptions: {
onPick: ({maxDate, minDate}) => {
this.curDate = minDate.getTime();
},
disabledDate: (time) => {
let currentD = new Date();
if (this.curDate) {
currentD = new Date(this.curDate);
}
let currMonth = currentD.getMonth() + 1;
let afterMonth = currMonth - 1;
let afterYear;
if (afterMonth == 0) {
afterMonth = 12;
afterYear = currentD.getFullYear()
} else {
afterYear = currentD.getFullYear() + 1;
}
let beforeMonth = currMonth + 1;
let beforeYear;
if (beforeMonth == 13) {
beforeMonth = 1;
beforeYear = currentD.getFullYear();
} else {
beforeYear = currentD.getFullYear() - 1;
}
let currDate = currentD.getDate();
let afterDate = new Date(afterYear + '-' + afterMonth + '-' + currDate);
let beforeDate = new Date(beforeYear + '-' + beforeMonth + '-' + currDate);
if (new Date() < afterDate) {
afterDate = new Date();
}
return time.getTime() < beforeDate || time.getTime() > afterDate
}
}
}
}
},
methods: {
getDateTime() {
this.key += 1; // 时间选择后进行页面刷新
let dateValues = this.monthValue;
let fromDate = dateValues[0];
let toDate = dateValues[1];
}
}
}
</script>