CustomDatePicker 自定义日期选择器

增强的日期选择器组件，支持快捷选择按钮，提供常用的日期范围选择功能。

基础用法

<template>
  <div>
    <custom-date-picker v-model="dateRange" @range-change="handleRangeChange" />
  </div>
</template>

<script>
import CustomDatePicker from '@/components/form/comps/custom-date-picker'

export default {
  components: {
    CustomDatePicker
  },
  data() {
    return {
      dateRange: []
    }
  },
  methods: {
    handleRangeChange({ startTime, endTime }) {
      console.log('开始时间:', startTime)
      console.log('结束时间:', endTime)
    }
  }
}
</script>

带字段名映射的用法

<template>
  <div>
    <custom-date-picker
      v-model="dateRange"
      start-time-field="startDate"
      end-time-field="endDate"
      @range-change="handleRangeChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateRange: []
    }
  },
  methods: {
    handleRangeChange({ startTime, endTime }) {
      // 返回带字段名的对象
      console.log('日期范围:', { startDate: startTime, endDate: endTime })
    }
  }
}
</script>

自定义配置

<template>
  <div>
    <custom-date-picker v-model="dateRange" :other-option="customOptions" @range-change="handleRangeChange" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateRange: [],
      customOptions: {
        startPlaceholder: '请选择开始日期',
        endPlaceholder: '请选择结束日期',
        type: 'daterange',
        rangeSeparator: '至',
        size: 'small',
        active: 'month' // 默认选中"本月"
      }
    }
  }
}
</script>

API

Props

参数	说明	类型	默认值
value	绑定值	Array/String	[]
otherOption	日期选择器配置选项	Object	{ startPlaceholder: '开始时间', endPlaceholder: '结束时间', type: 'daterange', rangeSeparator: '-', size: 'mini', active: '' }
startTimeField	开始时间字段名	String	''
endTimeField	结束时间字段名	String	''

Events

事件名	说明	回调参数
input	日期值改变时触发	value: 日期数组
range-change	日期范围改变时触发	{ startTime, endTime } 或 { [startTimeField], [endTimeField] }

快捷选项

组件内置了以下快捷选择按钮：

按钮名称	说明	日期范围
上月	上个月的第一天到最后一天	上个月 1 号到上个月最后一天
昨天	昨天的日期	昨天 00:00:00 到昨天 23:59:59
今天	今天的日期	今天 00:00:00 到今天 23:59:59
本周	本周的第一天到最后一天	本周一 00:00:00 到本周日 23:59:59
本月	本月的第一天到最后一天	本月 1 号 00:00:00 到本月最后一天 23:59:59

功能特性

1. 快捷选择

• 提供常用的日期范围快捷按钮
• 点击快捷按钮自动设置日期范围
• 支持高亮显示当前选中的快捷选项

2. 字段映射

• 支持自定义开始时间和结束时间的字段名
• 通过 range-change 事件返回带字段名的对象

3. 配置灵活

• 支持自定义日期选择器的所有配置选项
• 支持设置默认选中的快捷选项

4. 数据格式化

• 自动将日期格式化为 YYYY-MM-DD 格式
• 支持清空选择，返回空数组

注意事项

1. 依赖 moment.js：组件内部使用 moment.js 进行日期处理
2. 日期格式：返回的日期格式为 YYYY-MM-DD
3. 快捷选项：快捷选项基于当前时间动态计算
4. 字段映射：当设置了 startTimeField 和 endTimeField 时，range-change 事件会返回带字段名的对象
5. 默认选中：可以通过 otherOption.active 设置默认选中的快捷选项