MUI 键盘日期选择器

Question

我在项目中有 mui keyboardDatePicker 组件，并使用

InputAdornmentProps={{ position: 'start', variant: 'standard' }}

道具将图标从字段的末尾移动到字段的开头。

这会在末尾留出一个空间用于结束装饰，即用于成功/失败验证的勾号/十字图标...那么我如何在那里获得一个呢？ InputAdornmentProps 处理日历图标，如何将另一个图标添加到此组件中 - 可能吗？我没有看到允许这样做的道具？

Answer 1

这就是我最终的结果

const DatePicker: DatePickerType = ({
  id,
  closeDelay,
  openDelay,
  onChange,
  onOpen,
  onClose,
  format,
  value,
  errorMessage,
  placeholder,
  ...props
}: IDatePickerProps) => {
  const isValid = !errorMessage && !!value;
  const [isPickerOpen, setIsPickerOpen] = React.useState(false);
  const styles = makeDatePickerStyling({
    isError: !!errorMessage,
    isValid,
  });

  const handleChange = (d: Date | null) => {
    onChange(d ? d : undefined);
  };

  const handleOpen = () => {
    if (isPickerOpen) return;

    onOpen();
    setTimeout(() => {
      setIsPickerOpen(true);
    }, openDelay || DEFAULT_DELAY_TIME);
  };

  const handleClose = () => {
    if (isPickerOpen === false) return;

    onClose();
    setTimeout(() => {
      setIsPickerOpen(false);
    }, closeDelay || DEFAULT_DELAY_TIME);
  };

  let endAdornment;

  if (isValid || errorMessage) {
    const validationIconType = isValid ? 'valid' : 'invalid';
    const ValidationIconComponent = icons[validationIconType];
    endAdornment = (
      <InputAdornment
        position="end"
        data-testid={`endAdornment-${validationIconType}`}
        css={styles.inputAdornmentEnd}
      >
        <ValidationIconComponent fill="red" viewBox="2 2 20 20" />
      </InputAdornment>
    );
  }

  return (
    <div css={styles.datePickerContainer}>
      <Global styles={styles.globalStyles} />
      <DesktopDatePicker
        closeOnSelect
        open={isPickerOpen}
        onOpen={handleOpen}
        onClose={handleClose}
        format={format}
        slotProps={{
          inputAdornment: {
            position: 'start',
          },
          textField: {
            readOnly: true,
            onClick: isPickerOpen ? handleClose : handleOpen,
            placeholder,
            InputProps: {
              endAdornment,
              id,
              name: 'datePicker',
            },
          } as DatePickerTextFieldType, // MUI types doesn't include readOnly, but this is a real prop
          popper: {
            placement: 'bottom',
            modifiers: [
              {
                name: 'offset',
                options: {
                  offset: [0, -15],
                },
              },
            ],
          },
        }}
        value={value}
        onChange={handleChange}
        {...props}
      />
    </div>
  );
};