如何在 react-datepicker 旁边设置日历图标？

Posted 2023-02-22

【中文标题】如何在 react-datepicker 旁边设置日历图标？

【英文标题】：How can I set the calendar icon beside the react-datepicker?

【发布时间】：2021-08-16 08:09:21

【问题描述】：

如何在 react-datepicker 之后放置日历图标？目前，每次我点击日期选择器时，它都会跟随日期选择器的行，而不是停留在它旁边。

这些是代码：https://codesandbox.io/s/festive-wescoff-71z8u?file=/src/App.js

<label>
        <DatePicker
          wrapperClassName="datePicker"
          selected=startDate
          onChange=(date) => setStartDate(date)
          showTimeSelect
          dateFormat="dd/MM/yyyy hh:mm a"
          timeFormat="hh:mm a"
        />
        <TodayIcon />
      </label>

【问题讨论】：

也许你可以试试这个：react-todo-jp-cksvcu.stackblitz.io。另外，如果有用，请不要忘记接受有用的答案。

【参考方案1】：

您可以像这样为您的 DatePicker 提供自定义输入，它会正常运行

const CustomInput = React.forwardRef((props, ref) => 
  return (
    <div>          // You can style this further
      <label onClick=props.onClick ref=ref>         
        props.value || props.placeholder
      </label>
      <TodayIcon onClick=props.onClick />
    </div>
  );
);


 <DatePicker
          wrapperClassName="datePicker"
          selected=startDate
          onChange=(date) => setStartDate(date)
          showTimeSelect
          minDate=new Date()
          minTime=minTime
          maxTime=new Date(0, 0, 0, 17) // 5:00pm
          dateFormat="dd/MM/yyyy hh:mm a"
          timeFormat="hh:mm a"
          timeIntervals=30
          customInput=<CustomInput/>
    /> 

【参考方案2】：

您应该保持<label> 位置相对并更新以下样式

.MuiSvgIcon-root 
    fill: currentColor;
    width: 1em;
    height: 1em;
    display: inline-block;
    font-size: 1.5rem;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    flex-shrink: 0;
    user-select: none;
    position: absolute;
    right: 0;
    top: -4px;