picker-options：
| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] |
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function |
| cellClassName | 设置日期的 className | Function(Date) |
| firstDayOfWeek | 周起始日 | Number， 1 到 7，默认7 |
| onPick | 选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效 |
Function({ maxDate, minDate }) |
这里通过disabledDate来设置禁用时间
今天之前的时间禁用：time.getTime() < Date.now() - 8.64e7
六个月后的时间禁用： time.getTime() > new Date().getTime() + 3600 * 1000 * 24 * 180
3600秒 * 1000毫秒 * 24小时 * 180天，其他禁用天数一次类推
<el-form-item label="承诺到款日期" prop="contractNumber">
<el-date-picker
v-model="form.promisePayDate"
type="date"
:picker-options="pickerOptions"
placeholder="选择日期"
style="width: 100%"
/>
</el-form-item>
data(){
return{
pickerOptions: {
disabledDate: (time) => {
return (
time.getTime() > new Date().getTime() + 3600 * 1000 * 24 * 180 ||
time.getTime() < Date.now() - 8.64e7
)
},
},
}
}
禁用多时间：通过接口获取可以选择的时间，其他时间一律禁用
<el-date-picker
v-model="form.reserveDate"
type="date"
style="width: 100%"
placeholder="选择日期"
:picker-options="pickerOptions"
:disabled="isEdit"
@change="changeDate"
/>
data(){
return{
pickerOptions:{}
}
}
methods:{
async getDateList() {
const res = await getReserveDateList({
pageNo: 1,
pageSize: -1,
})
//可以选择的时间范围
this.dateList = []
res.data.records.map((item) => {
if (
parseTime(item.reserveDate, '{y}-{m}-{d}') >=
parseTime(new Date(), '{y}-{m}-{d}')
) {
this.dateList.push(item.reserveDate)
}
})
this.pickerOptions = Object.assign({}, this.pickerOptions, {
disabledDate: (time) => {
//今日前的时间不可选择
let disabled = time.getTime() < new Date().getTime() - 86400000
//在可选择的时间范围内的时间不禁用，其他时间禁用
let flag = true
for (let i = 0; i < this.dateList.length; i++) {
if (
parseTime(time, '{y}-{m}-{d}') ==
parseTime(this.dateList[i], '{y}-{m}-{d}')
) {
flag = false
}
}
return disabled || flag
},
})
this.$forceUpdate()
},
}