React+TypeScript中react-datepicker日历始终显示在输入框下方的实现问题

数据老陈

2026-6-25

React DatePicker 6.x 强制日历显示在输入框底部解决方案

针对react-datepicker 6.8.0 + TypeScript的场景，单独设置popperPlacement="bottom"无效，是因为新版本基于Floating UI实现定位，默认启用了flip和preventOverflow等修饰器，会自动调整日历位置。要强制固定在底部，需要配合popperModifiers禁用自动调整逻辑，具体实现如下：

1. 导入必要依赖与类型

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
// 导入Floating UI的Modifier类型，适配TypeScript类型检查
import type { Modifier } from '@floating-ui/react';

2. 配置强制底部定位的修饰器

定义popperModifiers数组，核心是禁用flip修饰器（防止空间不足时自动翻转到顶部），可选调整偏移量或溢出规则：

const popperModifiers: Modifier[] = [
  {
    name: 'flip',
    enabled: false, // 禁用自动翻转，强制保持bottom位置
  },
  {
    name: 'offset',
    options: {
      offset: [0, 8], // 日历与输入框的垂直间距，按需调整
    },
  },
  // 可选：如果需要限制日历在视口内显示，保留preventOverflow并配置边界
  // {
  //   name: 'preventOverflow',
  //   options: {
  //     boundary: 'viewport',
  //     padding: 10,
  //   },
  // },
];

3. 在DatePicker组件中应用配置

同时设置popperPlacement="bottom"和popperModifiers：

const DatePickerDemo = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);

  return (
    <div style={{ width: '240px', margin: '40px' }}>
      <DatePicker
        selected={selectedDate}
        onChange={(date) => setSelectedDate(date)}
        popperPlacement="bottom"
        popperModifiers={popperModifiers}
        placeholderText="选择日期"
      />
    </div>
  );
};

export default DatePickerDemo;