如何实现Antd DatePicker在移动端抽屉中以Inline模式展示？

核心思路 #

• 用React状态管理抽屉的显示/隐藏，替代直接操作DOM加类的方式，更符合React开发规范
• 移动端点击外部DatePicker时，阻止默认弹窗弹出，转而打开自定义抽屉
• 抽屉内放置inline模式的Antd DatePicker，同步选中日期与外部控件

完整实现代码 #

import { useState, useEffect } from 'react';
import { DatePicker } from 'antd';
import 'antd/dist/antd.css';

const AdaptiveDatePicker = () => {
  // 管理选中的日期
  const [selectedDate, setSelectedDate] = useState(null);
  // 管理抽屉显示状态
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  // 管理当前是否为移动端
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 700);

  // 监听窗口尺寸变化，更新移动端状态
  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 700);
      // 窗口变大时自动关闭抽屉
      if (window.innerWidth > 700) {
        setIsDrawerOpen(false);
      }
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // 处理外部DatePicker的点击事件
  const handleDatePickerClick = (e) => {
    if (isMobile) {
      // 阻止Antd默认的弹窗弹出
      e.preventDefault();
      // 打开抽屉
      setIsDrawerOpen(true);
    }
    // 桌面端不做处理，保持默认行为
  };

  // 处理抽屉内DatePicker的日期选择
  const handleInlineDateChange = (date) => {
    setSelectedDate(date);
    // 可选：选中日期后自动关闭抽屉
    // setIsDrawerOpen(false);
  };

  // 关闭抽屉的方法
  const closeDrawer = () => {
    setIsDrawerOpen(false);
  };

  return (
    <div>
      {/* 外部DatePicker控件 */}
      <DatePicker
        placeholder='EndDate'
        onClick={handleDatePickerClick}
        onChange={setSelectedDate}
        value={selectedDate}
        name='EndDatePicker'
        id='EndDatePicker'
        style={{ border: "transparent", boxShadow: "none" }}
      />

      {/* 移动端抽屉 */}
      <div 
        id='MobileDatePickerOverlay'
        className={`mlk-drawer ${isDrawerOpen ? 'mlk-drawer-open' : ''}`}
      >
        {/* 抽屉头部：关闭按钮 + 标题 */}
        <div className="mlk-drawer-header">
          <h3>选择结束日期</h3>
          <button onClick={closeDrawer}>×</button>
        </div>
        {/* 抽屉内容：Inline模式的DatePicker */}
        <div className="mlk-drawer-content">
          <DatePicker
            inline
            value={selectedDate}
            onChange={handleInlineDateChange}
          />
        </div>
      </div>
    </div>
  );
};

export default AdaptiveDatePicker;

关键细节说明 #

1. 状态替代DOM操作：用isDrawerOpen状态控制抽屉的mlk-drawer-open类名，避免直接操作DOM，更易维护
2. 阻止默认弹窗：移动端点击时调用e.preventDefault()，防止Antd DatePicker的默认弹窗和自定义抽屉同时出现
3. 日期同步：外部控件和抽屉内的Inline控件共享selectedDate状态，保证选中日期一致
4. 窗口resize监听：窗口尺寸变化时自动更新移动端状态，桌面端自动关闭抽屉，提升用户体验
5. 抽屉样式：需要确保mlk-drawer类默认是隐藏状态（比如display: none或transform: translateX(100%)），mlk-drawer-open类控制显示（比如display: block或transform: translateX(0)）

内容的提问来源于stack exchange，提问作者hassan iqbal