How can I replace Antd DatePicker's default input with a custom icon trigger?

Below is one way to solve the problem. The idea is that the DatePicker’s popup mechanism relies on the input element being part of the layout. Completely hiding it via display: none takes it out of the layout, so the popup either can’t be positioned or disappears. Instead, you can visually hide the input while keeping it in the DOM (for example, by positioning it off-screen or setting its opacity to zero and disabling pointer events).

Below is an example using inline styling:

JAVASCRIPTCopied
import React, { useState } from 'react';
import { DatePicker } from 'antd';
import { CalendarOutlined } from '@ant-design/icons';

const CustomDatePicker = () => {
  const [open, setOpen] = useState(false);

  const handleIconClick = () => {
    setOpen(true);
  };

  return (
    <>
      <CalendarOutlined 
        className="calendar-icon" 
        onClick={handleIconClick} 
        style={{ fontSize: '24px', cursor: 'pointer' }} 
      />

      {/* Instead of display: 'none', we use styles that hide the input visually but keep it in the DOM */}
      <div style={{ position: 'absolute', opacity: 0, pointerEvents: 'none' }}>
        <DatePicker open={open} onOpenChange={setOpen} />
      </div>
    </>
  );
};

export default CustomDatePicker;

How It Works

• Keeping the DatePicker in the DOM:
  By wrapping the DatePicker in a div that is absolutely positioned with opacity: 0 and pointerEvents: 'none', the DatePicker remains in the document flow so it can correctly compute the popup position when opened.

• Triggering the DatePicker:
  The custom icon (CalendarOutlined) is visible and when clicked, it sets open to true. This causes the DatePicker popup to render.

This approach leverages the controlled open state of the DatePicker without removing it entirely from the document via CSS display.

Feel free to adjust the styling as needed to ensure that the DatePicker’s input field does not interfere with your layout.