vue-business-date-picker/README.md

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

# Vue Business Date Picker

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

## 特性

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

## 安装

```bash
npm install vue-business-date-picker
```

## 使用

### 全局注册

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

Vue.use(BusinessDatePicker)
```

### 局部注册

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

export default {
  components: {
    BusinessDatePicker
  }
}
```

### 基础使用

```vue
<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 | 重置选择器 | — |

## 示例

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

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

### 限制日期选择范围

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

### 添加自定义节假日

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

### 不禁用任何日期

```vue
<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
- 初始版本发布
- 支持工作日选择
- 支持自定义节假日
- 支持日期范围限制