如何点击元素唤起Mantine UI DatePicker并自定义所需UI

要实现点击自定义的入住/退房区域唤起日期选择器，你可以放弃DatePickerInput的默认输入框，改用基础的DatePicker组件配合自定义触发区域，通过状态控制弹窗的显示隐藏。这样既能完全定制UI，又能复用Mantine日期选择的核心逻辑。

实现步骤与代码示例 #

import { useState } from 'react';
import { DatePicker, useDisclosure, Box, Text } from '@mantine/core';
import type { DatePickerProps } from '@mantine/dates';

const CustomStayDatePicker = () => {
  // 管理日期范围值
  const [dateRange, setDateRange] = useState<DatePickerProps['value']>(null);
  // 管理日期选择器弹窗的显示状态
  const { opened, open, close } = useDisclosure();

  // 格式化日期为指定格式显示
  const formatDisplayDate = (date: Date | null) => {
    return date 
      ? new Intl.DateTimeFormat('en-US', { day: '2-digit', month: 'short', year: '2-digit' }).format(date) 
      : 'Select date';
  };

  return (
    <>
      {/* 自定义触发区域：拆分入住/退房模块 */}
      <Box
        style={{
          display: 'flex',
          gap: '1.5rem',
          padding: '0.75rem 1.25rem',
          border: '1px solid #e2e8f0',
          borderRadius: '0.5rem',
          cursor: 'pointer',
          width: 'fit-content'
        }}
        onClick={open}
      >
        <Box>
          <Text size="xs" color="dimmed" mb={4}>入住</Text>
          <Text fontWeight={500}>{formatDisplayDate(dateRange?.[0])}</Text>
        </Box>
        <Box>
          <Text size="xs" color="dimmed" mb={4}>退房</Text>
          <Text fontWeight={500}>{formatDisplayDate(dateRange?.[1])}</Text>
        </Box>
      </Box>

      {/* 日期选择器弹窗 */}
      <DatePicker
        type="range"
        valueFormat="DD MMM, YY"
        value={dateRange}
        onChange={(newRange) => {
          setDateRange(newRange);
          close(); // 选完日期自动关闭弹窗
        }}
        numberOfColumns={2}
        visible={opened}
        onChangeVisible={close}
        // 沿用你原来的日期样式配置
        styles={{
          day: {
            '&[data-selected], &[data-selected]:hover': {
              backgroundColor: '#000000',
              color: 'white',
            },
            '&[data-in-range], &[data-in-range]:hover': {
              backgroundColor: '#000000',
              color: 'white',
              opacity: '0.5',
            },
            '&[data-first-in-range], &[data-first-in-range]:hover': {
              backgroundColor: '#000000',
              color: 'white',
              opacity: '1',
            },
            '&[data-last-in-range], &[data-last-in-range]:hover': {
              backgroundColor: '#000000',
              color: 'white',
              opacity: '1',
            },
          },
        }}
        // 配置弹窗定位，让它显示在触发区域下方
        position="bottom-start"
        withArrow
        trapFocus
      />
    </>
  );
};

export default CustomStayDatePicker;

关键说明 #

• 自定义触发区域：你可以完全按照需求修改Box内的布局、样式，比如调整间距、颜色、添加图标等，点击该区域就会唤起日期选择器。
• 弹窗状态管理：通过useDisclosure钩子快速实现弹窗的打开/关闭逻辑，无需手动维护布尔状态。
• 样式复用：原有的日期选中、范围样式可以直接迁移到DatePicker的styles属性中，保持样式一致性。
• 用户体验优化：选择日期后自动关闭弹窗，同时position和withArrow属性让弹窗定位更合理。

内容的提问来源于stack exchange，提问作者Ashutosh Dash