ant-design-vue的RangePicker

### 关于 Ant Design Vue 中 RangePicker 组件的使用

#### 基本介绍
Ant Design Vue 提供了一个强大的 `a-range-picker` 组件用于选择日期范围。此组件允许用户通过图形界面方便地选取起始和终止日期，并支持多种配置选项来满足不同的业务需求。

#### 安装与引入
为了在项目里使用该组件，需先安装 ant-design-vue 库：

npm install ant-design-vue --save

接着，在项目的入口文件中注册所需模块并按需加载样式表[^1]。

#### HTML 结构定义
下面是一个简单的例子展示如何将 `<a-range-picker>` 插入到模板内:

<a-range-picker @change="handleChange" />

这里展示了最基础的形式；当然也可以自定义更多属性以适应具体场景下的应用需求。

#### 属性设置
- **v-model**: 双向绑定选中的日期区间数组。
- **format**: 自定义输入框显示格式，默认为 "YYYY-MM-DD"[^3]。
- **placeholder**: 设置占位符文字提示给用户。
- **disabledDate**: 函数形式传参控制不可选日期[^2]。
- **showTime**: 是否开启时间选择模式以及其相关参数设定，比如可以通过 `defaultValue` 来指定初始的时间值[^4]。

例如，当希望限制可选日期不超过今天时可以这样做：

// JavaScript部分
export default {
  methods: {
    disabledDate(current) {
      // 不可以选择今天的之后的日子
      return current && current > moment().endOf('day');
    },
  }
}

对于想要精确到秒级的选择，则可通过如下方式实现：

<!-- 开启时间选择 -->
<a-range-picker show-time :default-value="[moment(), moment().add(7, 'days')]" />

<!-- 或者更详细的配置 -->
<a-range-picker
  show-time={{
    hideDisabledOptions: true,
    defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]
  }}
/>

以上代码片段分别实现了不同精度级别的日期加时间的选择功能。

#### 方法调用
除了响应事件外，还可以主动触发一些内置的方法来进行交互操作，如清空当前选定值等。

this.$refs.picker.clear(); // 清除已选日期

请注意上述示例假设存在名为 picker 的 ref 引用来指向实际 DOM 节点。