el-date-picker范围选择第二个值默认当月最后一天
时间: 2023-07-24 17:37:10 浏览: 203
el-date-picker 英文改中文.doc
5星 · 资源好评率100%
您好,针对您的问题,可以通过设置 el-date-picker 的 picker-options 属性来实现。
具体步骤如下:
1. 在 el-date-picker 中添加 picker-options 属性,值为一个对象。
2. 在对象中添加 disabledDate 属性,值为一个函数。
3. 在函数中判断当前选择的日期是否为第一个日期,如果是,则将第二个日期的可选范围设置为当前月份最后一天之前的日期。
示例代码如下:
```html
<el-date-picker
v-model="dateRange"
type="daterange"
:picker-options="pickerOptions"
></el-date-picker>
```
```javascript
data() {
return {
dateRange: [],
pickerOptions: {
disabledDate: (time, picker) => {
if (picker.id === 'end' && this.dateRange.length > 0) {
const start = new Date(this.dateRange[0])
const end = new Date(time)
return end < start || end > new Date(start.getFullYear(), start.getMonth() + 1, 0)
}
return false
}
}
}
}
```
在上述代码中,我们通过判断当前选择的日期是否为第二个日期,并且第一个日期已经选择了,来判断是否需要限制第二个日期的可选范围。如果需要限制,则将可选范围设置为当前月份最后一天之前的日期。
注意:这里的 start.getMonth() + 1 表示获取下一个月份,然后将日期设置为 0,即表示获取上一个月份的最后一天。
阅读全文