描述
项目中有个选择日期不能跨月的需求，当点击某个月份中的某一天时，结束时间只能在第一次选择日期的所属月份内选择，如下图所示
翻翻element-ui的文档，发现有个picker-option属性，该属性中的disabledDate与onPick结合可以做到这一点
方法实现
<qb-date-picker
v-model="dateVal"
type="daterange"
format="yyyy-MM-dd"
:default-time="['00:00:00', '23:59:59']"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
></qb-date-picker>
export default {
data() {
selectDate: null,
dateVal:'',
pickerOptions: {
disabledDate: time => {
if (this.selectDate == null) {
return false
} else {
//用选择的开始日期判断，排除掉选择日期的年和月，其他的都禁用掉
return time.getFullYear() ！=this.selectDate.getFullYear()
|| time.getMonth() != this.selectDate.getMonth()
}
},
onPick: date => {
//当只选择了开始日期未选择结束日期时，控制禁用日期
if (date.minDate && !date.maxDate) {
this.selectDate = date.minDate
} else {
this.selectDate = null
}
}
}
}
}
日期范围不超过多少天的实现方法
如图所示，点击开始时间21的位置后，往前或者往后选择结束日期都不会超过7天
代码实现：
pickerOptions: {
disabledDate: time => {
if (this.selectDate == null) {
return false
} else {
let dayjsObj = dayjs(dayjs(this.selectDate).format('YYYY-MM-DD'))
let timeStamp = time.getTime()
return timeStamp > dayjsObj.add(7, 'day').toDate().getTime() ||
timeStamp < dayjsObj.subtract(7, 'day').toDate().getTime()
}
},
onPick: date => {
if (date.minDate) {
this.selectDate = date.minDate
} else {
this.selectDate = null
}
}
}
日期范围只能在往前一个月里可选择
以2022-07-25这天为例，往前推一个月即2022-06-25 ，小于022-07-25并大于2022-06-25的日期可选
这种条件的disabledDate设置如下：
pickerOptions: {
disabledDate: time => {
const date = new Date()
//只可选择往前一个月的日期范围
let handelTime = dayjs(date).subtract(1, 'month').toDate().getTime()
return time.getFullYear() != date.getFullYear() || time < handelTime || time > date.getTime()
}
}
dayjs是一个很好用的日期工具，有需要的可以去这里了解一下奥，传送门>> Day.js中文官网
感谢这位网友的分享，自己也记录一下，以免日后忘记 原创地址
