Ant desgin中a-range-picker如何使用

Ant Design 的 RangePicker（范围选择器）是一个用于选择日期和时间范围的组件，在 Vue 或者 React 中都可以方便地集成和使用。以下是基本的使用步骤：

1. 引入依赖：首先需要安装 Ant Design Vue 或 React 版本的库，如果是 Vue，可以在 `main.js` 或 `App.vue` 文件中引入：

   <script src="https://unpkg.com/ant-design-vue@latest/dist/antd-with-vue.min.js"></script>

如果是 React，通常会通过 npm 或 yarn 安装，然后导入 `DatePicker` 和 `RangePicker` 组件：

   import { DatePicker, RangePicker } from 'ant-design-pro';

2. 创建 RangePicker 组件：在你的组件模板或 JSX 中，添加 RangePicker 组件，并提供所需的属性，如开始日期、结束日期等：

   <!-- Vue -->
   <a-range-picker :value="dateRange" />

   // React
   const dateRange = [new Date(), new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)]; // 示例日期范围
   <RangePicker value={dateRange} />

3. 配置选项：你可以设置各种选项，如日期格式、允许修改、禁用某些日期等。例如：

   <RangePicker
     value={dateRange}
     format="YYYY-MM-DD"
     disabledDate={(current) => current && current < moment().subtract(7, 'days')}
   />

4. 更新状态：当用户改变日期范围时，确保处理组件内的值变化并更新你的应用程序状态。