如何使用moment-business-days实现q-date禁用周末及过往日期

问题根因 #

你现有代码存在两个核心错误，导致逻辑不生效、返回值无法被q-date识别：

• moment-business-days的monthBusinessDays()方法作用是获取当月所有工作日的moment对象数组，不是针对传入的单个日期的布尔判断，数组属于对象类型，q-date的日期配置项无法解析该类型返回值，且数组恒为真值，完全起不到日期过滤作用。
• 日期比对格式不统一：组件绑定的日期格式是YYYY-MM-DD，但过往日期判断时使用YYYY/MM/DD格式做字符串比较，会出现逻辑错误。

修正方案 #

判断单个日期是否为工作日，直接使用moment-business-days提供的.isBusinessDay()方法，该方法直接返回布尔值，符合q-date的options回调入参要求；同时统一日期比对格式，和组件mask保持一致。

1. 首先确保依赖正确引入，注意Quasar的date工具不要和moment变量重名：

import moment from 'moment'
import 'moment-business-days'
import { date as qDate } from 'quasar'

2. pug模板部分无需修改，保持原有写法即可：

q-date(v-model="userInfo.date" mask="YYYY-MM-DD" :options="getAvailableDate" first-day-of-week="1")

3. 重写getAvailableDate方法：

getAvailableDate(d) {
  const currentDay = moment(d)
  // 判断是否为工作日（自动排除周六周日）
  const isBusinessDay = currentDay.isBusinessDay()
  // 统一用YYYY-MM-DD格式做日期比对，和组件mask保持一致
  const today = qDate.formatDate(Date.now(), 'YYYY-MM-DD')
  const targetDay = currentDay.format('YYYY-MM-DD')
  const isNotPastDay = targetDay >= today

  // 直接返回布尔值，true代表日期可选，false代表禁用
  return isBusinessDay && isNotPastDay
}

扩展配置 #

如果需要额外排除法定节假日，可以在业务初始化逻辑中添加moment的节假日配置，配置后.isBusinessDay()会自动将配置的节假日识别为非工作日：

moment.updateLocale('zh-cn', {
  holidays: ['2024-10-01', '2024-10-02', '2024-10-03'], // 按实际节假日填充
  holidayFormat: 'YYYY-MM-DD'
})

注意：不要在getAvailableDate中调用monthBusinessDays()，该方法会遍历整月日期生成数组，在每个日期渲染时触发会造成不必要的性能损耗。

内容的提问来源于stack exchange，提问作者Serkan Gün