el-date-picker中非交易日不可选
时间: 2023-12-11 14:33:20 浏览: 135
element-ui 限制日期选择的方法(datepicker)
根据提供的引用内容,可以通过在el-date-picker组件中设置disabledDate属性来禁用非交易日。具体实现步骤如下:
1. 在Vue组件中引入moment.js和lodash.js库。
```javascript
import moment from 'moment';
import _ from 'lodash';
```
2. 在el-date-picker组件中设置disabledDate属性,并定义一个函数来判断日期是否为非交易日。
```html
<el-date-picker
v-model="date"
type="date"
:picker-options="pickerOptions"
:disabled-date="disabledDate">
</el-date-picker>
```
```javascript
data() {
return {
date: null,
pickerOptions: {
disabledDate: this.disabledDate
}
}
},
methods: {
disabledDate(time) {
// 判断日期是否为周六或周日
if (moment(time).day() === 6 || moment(time).day() === 0) {
return true;
}
// 判断日期是否为节假日
const holidays = ['2021-10-01', '2021-10-02', '2021-10-03'];
if (_.includes(holidays, moment(time).format('YYYY-MM-DD'))) {
return true;
}
return false;
}
}
```
在上述代码中,disabledDate函数首先判断日期是否为周六或周日,如果是则返回true,表示该日期不可选。然后判断日期是否为节假日,如果是则同样返回true。最后,如果日期既不是周六或周日,也不是节假日,则返回false,表示该日期可选。
阅读全文