如何在React（Material UI）中实现点击文本唤起日期选择器并更新文本？

这里提供两种实现方案，适配不同的样式需求：

方案一：基于TextField的轻量实现 #

这种方案直接复用Material UI的DatePicker组件，通过自定义输入框样式模拟可点击文本的效果，代码更简洁：

import { useState } from 'react';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { TextField } from '@mui/material';

export default function ExpiryDatePicker() {
  // 存储选中的日期，初始为null表示未选择
  const [selectedDate, setSelectedDate] = useState(null);

  // 格式化日期为友好的显示格式，也可以用date-fns的format方法
  const formatDisplayDate = (date) => {
    if (!date) return null;
    return new Intl.DateTimeFormat('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    }).format(date);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        // 根据是否选中日期动态切换显示文本
        label={selectedDate ? `Expires ${formatDisplayDate(selectedDate)}` : 'SetExpiryDate'}
        value={selectedDate}
        onChange={(newDate) => setSelectedDate(newDate)}
        // 自定义输入框样式，模拟可点击文本
        renderInput={(params) => (
          <TextField
            {...params}
            variant="standard"
            sx={{
              '& .MuiInput-underline:before, & .MuiInput-underline:after': { display: 'none' },
              cursor: 'pointer',
              '&:hover': { textDecoration: 'underline' },
              border: 'none',
              background: 'transparent'
            }}
          />
        )}
      />
    </LocalizationProvider>
  );
}

关键细节说明： #

• 状态管理：用useState跟踪选中的日期，未选择时保持null，以此切换显示文本
• 日期格式化：用浏览器原生的Intl.DateTimeFormat生成可读性强的日期字符串，也可以替换为date-fns的format方法实现自定义格式
• 样式模拟：通过sx去掉输入框的下划线、边框，hover时添加下划线，让输入框看起来和普通可点击文本一致
• 交互逻辑：点击文本（输入框）自动唤起Material UI的日期选择器弹窗，选中日期后自动更新显示文本

方案二：纯文本+弹窗的实现 #

如果想要完全的纯文本样式（没有输入框的痕迹），可以用Typography作为可点击文本，配合Dialog弹窗承载日期选择器：

import { useState } from 'react';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { Dialog, DialogContent, Typography, TextField } from '@mui/material';

export default function ExpiryDatePicker() {
  const [selectedDate, setSelectedDate] = useState(null);
  const [isPickerOpen, setIsPickerOpen] = useState(false);

  const formatDisplayDate = (date) => {
    if (!date) return null;
    return new Intl.DateTimeFormat('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    }).format(date);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      {/* 可点击的纯文本 */}
      <Typography
        variant="body1"
        sx={{
          cursor: 'pointer',
          color: '#1976d2',
          '&:hover': { textDecoration: 'underline' }
        }}
        onClick={() => setIsPickerOpen(true)}
      >
        {selectedDate ? `Expires ${formatDisplayDate(selectedDate)}` : 'SetExpiryDate'}
      </Typography>

      {/* 日期选择器弹窗 */}
      <Dialog open={isPickerOpen} onClose={() => setIsPickerOpen(false)}>
        <DialogContent>
          <DatePicker
            value={selectedDate}
            onChange={(newDate) => {
              setSelectedDate(newDate);
              setIsPickerOpen(false); // 选中日期后关闭弹窗
            }}
            onCancel={() => setIsPickerOpen(false)}
            renderInput={(params) => <TextField {...params} label="Select expiry date" />}
          />
        </DialogContent>
      </Dialog>
    </LocalizationProvider>
  );
}

关键细节说明： #

• 纯文本交互：用Typography渲染可点击文本，完全没有输入框的样式
• 弹窗控制：用isPickerOpen状态控制日期选择器弹窗的显示/隐藏，点击文本打开，选中或取消后关闭
• 逻辑一致：同样通过selectedDate状态切换显示文本，选中日期后自动更新内容

前置依赖安装 #

不管用哪种方案，都需要先安装必要的依赖：

npm install @mui/material @mui/x-date-pickers @emotion/react @emotion/styled date-fns

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