React Admin 4.3.1中如何设置DateInput支持字符串粘贴？

方法1：自定义粘贴事件处理函数 #

通过给DateInput传递inputProps，手动处理粘贴事件，解析剪贴板中的日期字符串并更新表单字段。

import { DateInput, useFormContext } from 'react-admin';
import { parseISO } from 'date-fns';

const PasteEnabledDateInput = ({ source, label }) => {
  const { setValue } = useFormContext();

  const handlePaste = (e) => {
    e.preventDefault();
    const pastedText = e.clipboardData.getData('text').trim();
    try {
      // 这里可根据业务需求替换为支持的日期格式解析逻辑
      const parsedDate = parseISO(pastedText);
      if (!isNaN(parsedDate.getTime())) {
        setValue(source, parsedDate);
      }
    } catch (err) {
      console.error('日期解析失败:', err);
    }
  };

  return (
    <DateInput
      source={source}
      label={label}
      inputProps={{ onPaste: handlePaste }}
    />
  );
};

// 替换原组件使用
<PasteEnabledDateInput source="to" label="End Date" />

方法2：配置parse函数兼容多种日期格式 #

利用DateInput的parse属性，定义字符串到Date对象的转换规则，让组件自动识别粘贴的日期字符串。

import { DateInput } from 'react-admin';
import { parse } from 'date-fns';

<DateInput
  source="to"
  label="End Date"
  parse={(value) => {
    // 按需添加需要支持的日期格式
    const supportedFormats = ['yyyy-MM-dd', 'MM/dd/yyyy', 'dd/MM/yyyy'];
    for (const format of supportedFormats) {
      const parsedDate = parse(value, format, new Date());
      if (!isNaN(parsedDate.getTime())) {
        return parsedDate;
      }
    }
    return null;
  }}
/>

方法3：直接使用MUI DatePicker组件 #

react-admin的DateInput基于MUI的日期选择器，直接集成MUI组件可获得更灵活的控制，默认支持粘贴操作。

import { useFormContext } from 'react-admin';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { TextField } from '@mui/material';

const CustomMuiDateInput = ({ source, label }) => {
  const { register, formState: { errors } } = useFormContext();
  const { ref, ...inputProps } = register(source);

  return (
    <DatePicker
      label={label}
      inputRef={ref}
      renderInput={(params) => (
        <TextField
          {...params}
          {...inputProps}
          error={!!errors[source]}
          helperText={errors[source]?.message}
        />
      )}
    />
  );
};

// 使用组件
<CustomMuiDateInput source="to" label="End Date" />

注：使用此方法需确保已正确安装@mui/x-date-pickers及相关依赖，并完成MUI日期组件的初始化配置。

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