Ant Design DatePicker 多选日期功能使用指南

前言

Ant Design 作为一款优秀的企业级 UI 设计语言和 React 组件库，其 DatePicker 日期选择器组件提供了丰富的功能。在实际开发中，我们经常会遇到需要选择多个日期的场景。本文将详细介绍如何正确使用 Ant Design 的 DatePicker 组件实现多选日期功能。

多选日期功能的基本用法

在 Ant Design 中，DatePicker 组件默认是单选模式。要启用多选功能，需要显式设置 multiple 属性为 true。同时，对应的 value 应该是一个包含多个日期对象的数组。

import { DatePicker } from 'antd';
import dayjs from 'dayjs';

const dateValue = [dayjs('2021-12-02'), dayjs('2022-12-02')];

function App() {
  return <DatePicker multiple value={dateValue} />;
}

常见错误与解决方案

错误示例

很多开发者会尝试直接将多个日期拼接成字符串传递给 DatePicker：

// 错误用法
const dateValue = "12/2/2021 12/2/2022";
<DatePicker value={dayjs(dateValue)} />

这种做法会导致组件显示"Invalid Date"错误，因为 dayjs 无法解析这种包含多个日期的字符串。

正确做法

正确的做法是：

1. 为 DatePicker 设置 multiple 属性
2. 将 value 设置为一个由 dayjs 对象组成的数组
3. 确保每个日期字符串的格式能被 dayjs 正确解析

日期格式处理建议

为了确保日期能被正确解析，建议：

1. 使用标准日期格式（如 ISO 8601 格式）
2. 避免使用可能引起歧义的格式（如 "12/2/2021" 可能被解析为 12月2日或2月12日）
3. 明确指定日期格式（使用 dayjs 的 format 方法）

const date1 = dayjs('2021-12-02', 'YYYY-MM-DD');
const date2 = dayjs('2022-12-02', 'YYYY-MM-DD');
const dateValue = [date1, date2];

国际化支持

Ant Design DatePicker 支持国际化，在多选模式下同样适用。只需配置相应的 locale 即可：

import frFR from 'antd/locale/fr_FR';

function App() {
  return (
    <ConfigProvider locale={frFR}>
      <DatePicker multiple />
    </ConfigProvider>
  );
}

总结

Ant Design 的 DatePicker 组件通过 multiple 属性支持多选日期功能。使用时需要注意：

1. 必须显式设置 multiple 属性
2. value 必须是一个由有效日期对象组成的数组
3. 日期格式应当明确且无歧义
4. 国际化支持在多选模式下同样有效

正确使用这些特性，可以轻松实现强大的多选日期功能，提升用户体验。