Vue Business Date Picker

一个基于 Element UI 的 Vue 工作日日期选择器组件，支持自动禁用周末和节假日，并可自定义工作日选择规则。

特性

• 🚀 基于 Element UI DatePicker 封装，保持原有 API 兼容性
• 📅 自动获取中国法定节假日和调休信息
• ⚙️ 灵活的工作日配置（周末禁用、节假日禁用、调休工作日等）
• 🎯 智能日期范围限制
• 📦 轻量级，性能优化的节假日数据获取
• 💪 TypeScript 友好

安装

npm install vue-business-date-picker

使用

全局注册

import Vue from 'vue'
import BusinessDatePicker from 'vue-business-date-picker'

Vue.use(BusinessDatePicker)

局部注册

import BusinessDatePicker from 'vue-business-date-picker'

export default {
  components: {
    BusinessDatePicker
  }
}

基础使用

<template>
  <business-date-picker
    v-model="selectedDate"
    placeholder="请选择工作日"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null
    }
  }
}
</script>

API

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|--------|--------| | value / v-model | 绑定值 | string/Date | — | — | | type | 显示类型 | string | year/month/date/dates/week/datetime/datetimerange/daterange/monthrange | date | | placeholder | 输入框占位文本 | string | — | 请选择日期 | | format | 显示在输入框中的格式 | string | — | yyyy-MM-dd | | valueFormat | 可选，绑定值的格式 | string | — | yyyy-MM-dd | | clearable | 是否可以清空选项 | boolean | — | true | | size | 输入框尺寸 | string | large/small/mini | medium | | readonly | 完全只读 | boolean | — | false | | editable | 文本框可输入 | boolean | — | true | | disableWeekends | 是否禁用周末 | boolean | — | true | | disableHolidays | 是否禁用节假日 | boolean | — | true | | enableWorkDays | 是否启用调休工作日 | boolean | — | false | | beforeDays | 可选择的前置天数 | number | — | 0 | | afterDays | 可选择的后置天数 | number | — | 0 | | baseDate | 基准日期 | string/Date | — | 当前日期 | | customHolidays | 自定义节假日列表 | Array | — | [] |

Events

| 事件名称 | 说明 | 回调参数 | |---------|------|----------| | change | 用户确认选定的值时触发 | 组件绑定值 | | blur | 当 input 失去焦点时触发 | 组件实例 | | focus | 当 input 获得焦点时触发 | 组件实例 |

Methods

| 方法名 | 说明 | 参数 | |--------|------|------| | isDateSelectable | 检查指定日期是否可选择 | (date: string/Date) | | getSelectableDatesInRange | 获取指定范围内的可选日期 | (startDate: string, endDate: string) | | getAllHolidaysList | 获取所有节假日列表 | — | | reset | 重置选择器 | — |

示例

禁用周末，但允许调休工作日

<business-date-picker
  v-model="date"
  :disable-weekends="true"
  :enable-work-days="true"
  placeholder="选择工作日（包含调休）"
/>

限制日期选择范围

<business-date-picker
  v-model="date"
  :before-days="30"
  :after-days="30"
  placeholder="30天内的日期"
/>

添加自定义节假日

<business-date-picker
  v-model="date"
  :custom-holidays="['2024-02-15', '2024-02-16']"
  placeholder="包含自定义节假日"
/>

不禁用任何日期

<business-date-picker
  v-model="date"
  :disable-weekends="false"
  :disable-holidays="false"
  placeholder="所有日期可选"
/>

依赖

• Vue.js 2.6+
• Element UI 2.15+
• dayjs
• chinese-days

许可证

MIT

贡献

欢迎提交 Issue 和 Pull Request。

更新日志

1.0.0

• 初始版本发布
• 支持工作日选择
• 支持自定义节假日
• 支持日期范围限制