传参

title

type： String default： '请选择时间'

popup 标题

value

type： Boolean default： false

popup 显示状态，支持 v-model 双向绑定

saveText

type： String default： '确定'

"确定"按钮文本内容

dataInfo

type： Object default： {}

配置对象，各字段说明如下：

| 字段名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | activeType | Number | 1 | 当前聚焦的时间类型：1 开始时间，2 结束时间 | | minDate | String | null | 最小可选择的日期，格式 YYYY-MM-DD，早于该日期的选项会被禁用 | | maxDate | String | null | 最大可选择的日期，格式 YYYY-MM-DD，晚于该日期的选项会被禁用 | | monthsInAdvance | Array | [-2, -1, 0, 1] | 可选月份偏移量数组，控制日期选择器展示哪些月份（相对当前月） | | startTime | String \| Number | null | 开始时间的初始值 | | endTime | String \| Number | null | 结束时间的初始值 | | defaultEndTime | String \| Number | null | 切换到结束时间时的默认填充值 |

事件

input

参数： Boolean

popup 关闭时触发，用于 v-model 同步显示状态

capture

参数： String

点击"确定"按钮后校验失败时触发，参数为错误提示文本。常见校验场景：

• 未选择开始时间：请选择开始时间
• 未选择结束时间：请选择结束时间
• 开始时间晚于结束时间：结束时间不能早于开始时间

confirm

参数： { startTime: Number, endTime: Number }

点击"确定"按钮且校验通过时触发，返回的开始时间和结束时间均为 13 位时间戳（毫秒）

使用示例

<template>
  <DatePickerPopup
    v-model="showPopup"
    title="请选择时间"
    :dataInfo="dataInfo"
    @capture="handleCapture"
    @confirm="handleConfirm"
  />
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
      dataInfo: {
        activeType: 1,
        minDate: '2024-01-01',
        maxDate: '2024-12-31',
        monthsInAdvance: [-1, 0, 1],
        startTime: null,
        endTime: null,
        defaultEndTime: null
      }
    }
  },
  methods: {
    handleCapture(tipText) {
      console.log('校验失败：', tipText)
    },
    handleConfirm({ startTime, endTime }) {
      console.log('开始时间：', startTime)
      console.log('结束时间：', endTime)
    }
  }
}
</script>