vue2 项目el-date-picker如何实现只能选择包括当天在内的30天工作日

Question

vie2项目el-date-picker如何实现只能选择包括当天在内的30天工作日，并且节假日和双休置灰不可选，30天不包括节假日和双休

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ,具体如下：

   可以使用 el-date-picker 的 disabled-date 属性和 shortcuts 属性来实现只能选择包括当天在内的30天工作日，并且节假日和双休置灰不可选，30天不包括节假日和双休的效果。

   首先，需要使用一个函数来检查日期是否是工作日。可以使用第三方库 moment.js 来判断日期是否为工作日。

具体代码如下：

import moment from 'moment';

function isWorkday(date) {
  const dayOfWeek = moment(date).day();
  return dayOfWeek !== 0 && dayOfWeek !== 6;
}

然后，在 el-date-picker 中设置 disabled-date 属性为一个函数，该函数用于判断日期是否可选。

<el-date-picker
  v-model="date"
  :disabled-date="disabledDate"
  :shortcuts="shortcuts"
/>

...

methods: {
  disabledDate(date) {
    // 当天之前的日期禁止选择
    if (date < new Date()) {
      return true;
    }

    // 30天后的日期禁止选择
    const maxDate = moment().add(30, 'days').toDate();
    if (date > maxDate) {
      return true;
    }

    // 节假日和双休日禁止选择
    if (!isWorkday(date)) {
      return true;
    }

    return false;
  },
  ...
}

然后，还可以设置 shortcuts 属性来添加一个快捷选项，用于选择包括当天在内的30天工作日。

shortcuts: [
  {
    text: '30天工作日',
    onClick(picker) {
      const today = new Date();
      let workdayCount = 0;
      let date = today;
      while (workdayCount < 30) {
        if (isWorkday(date)) {
          workdayCount++;
        }
        date = moment(date).add(1, 'days').toDate();
      }
      const maxDate = moment(date).subtract(1, 'days').toDate();
      picker.$emit('pick', [today, maxDate]);
    }
  }
]

这样，就可以实现只能选择包括当天在内的30天工作日，并且节假日和双休置灰不可选，30天不包括节假日和双休的效果。

---

如果以上回答对您有所帮助，望采纳～谢谢