Javascript React datepicker |日历在选择日期时未关闭

我已经看到了这一点，但它似乎并没有为我的问题提供任何解决方案

最近，我选择了一个使用

react datepicker

的项目，有一个问题是日历在选择日期时没有关闭。这里有一个gif展示了这一点

我的日期选择器组件在这里

const DatePicker: FC<Props> = ({
  label,
  icon,
  date,
  onChange,
  minDate,
  maxDate,
  selectsStart,
  selectsEnd,
}) => {
  const dateObj = useMemo(() => (date ? date.toDate() : null), [date])
  const minDateObj = useMemo(() => (minDate ? minDate.toDate() : null), [
    minDate,
  ])
  const maxDateObj = useMemo(() => (maxDate ? maxDate.toDate() : null), [
    maxDate,
  ])

  return (
    <div className={css.host}>
      <div className={css.label}>{label}</div>
      <label className={`${css.wrapper}`}>
        {icon}
        <ReactDatePicker
          selected={dateObj}
          className={css.input}
          calendarClassName={css.calendar}
          showTimeSelect
          dateFormat="dd/MM/yyyy h:mm aa"
          onChange={(newDate: Date, e) => {
            if (newDate) {
              const momentDate = moment(newDate)
              onChange(momentDate)
            }
          }}
          startDate={minDateObj}
          endDate={maxDateObj}
          minDate={minDateObj}
          maxDate={maxDateObj}
          selectsStart={selectsStart}
          selectsEnd={selectsEnd}
          showPopperArrow={false}
          popperModifiers={{
            offset: {
              enabled: true,
              offset: '-28px, 4px',
            },
          }}
          renderCustomHeader={customHeader}
        />
      </label>
    </div>
  )
}

我不知道我还能在这里做些什么，所以任何帮助都会很好

使用shouldCloseOnSelect prop as true可在选择后强制关闭

 () => {
      const [startDate, setStartDate] = useState(new Date());
      return (
        <DatePicker
          selected={startDate}
          onChange={date => setStartDate(date)}
          shouldCloseOnSelect={true}
        />
      );
    };

使用shouldCloseOnSelect prop as true可在选择后强制关闭

 () => {
      const [startDate, setStartDate] = useState(new Date());
      return (
        <DatePicker
          selected={startDate}
          onChange={date => setStartDate(date)}
          shouldCloseOnSelect={true}
        />
      );
    };

---

出现此问题的原因是，您正在将日期选择器组件包装到

标记中，请按如下方式从中展开日期选择器：

const日期选择器：FC=({
标签，
偶像
日期，
一旦改变，
minDate，
maxDate，
选择开始，
选择Send，
}) => {
const dateObj=usemo（（）=>（日期？date.toDate（）：null），[date]）
const minDateObj=useMemo（（）=>（minDate？minDate.toDate（）：null）[
minDate，
])
const maxDateObj=useMoom（（）=>（maxDate？maxDate.toDate（）：null）[
maxDate，
])
返回(
{label}
{icon}
{
如果（新日期）{
const momentDate=时刻（newDate）
onChange（momentDate）
}
}}
startDate={minDateObj}
endDate={maxDateObj}
minDate={minDateObj}
maxDate={maxDateObj}
selectsStart={selectsStart}
selectsEnd={selectsEnd}
showPopperRow={false}
波普尔修正器={{
偏移量：{
启用：对，
偏移量：'-28px，4px'，
},
}}
renderCustomHeader={customHeader}
/>
)
}

发生此问题是因为您将日期选择器组件包装在一个

标记中，请按如下方式从中展开日期选择器：

const日期选择器：FC=({
标签，
偶像
日期，
一旦改变，
minDate，
maxDate，
选择开始，
选择Send，
}) => {
const dateObj=usemo（（）=>（日期？date.toDate（）：null），[date]）
const minDateObj=useMemo（（）=>（minDate？minDate.toDate（）：null）[
minDate，
])
const maxDateObj=useMoom（（）=>（maxDate？maxDate.toDate（）：null）[
maxDate，
])
返回(
{label}
{icon}
{
如果（新日期）{
const momentDate=时刻（newDate）
onChange（momentDate）
}
}}
startDate={minDateObj}
endDate={maxDateObj}
minDate={minDateObj}
maxDate={maxDateObj}
selectsStart={selectsStart}
selectsEnd={selectsEnd}
showPopperRow={false}
波普尔修正器={{
偏移量：{
启用：对，
偏移量：'-28px，4px'，
},
}}
renderCustomHeader={customHeader}
/>
)
}

我试过，但使用

shouldCloseOnSelect={true}

无法解决我的问题我试过，但使用

shouldCloseOnSelect={true}

无法解决我的问题他们页面中的日期选择器正在按您的要求工作，对吗？是的，@Kalhan.Toress，我还想知道这是否是与我的浏览器相关的问题，但它在那里工作移动标签标签或封面div标签日期选择器在他们的页面中工作正常吗？是的，@Kalhan.Toress，我还想知道这是否是与我的浏览器相关的问题，但它在那里工作移动标签或封面div标签

 () => {
      const [startDate, setStartDate] = useState(new Date());
      return (
        <DatePicker
          selected={startDate}
          onChange={date => setStartDate(date)}
          shouldCloseOnSelect={true}
        />
      );
    };

() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}[![enter image description here][1]][1]
      onChange={date => setStartDate(date)}
      timeInputLabel="Time:"
      dateFormat="MM/dd/yyyy h:mm aa"
      showTimeInput
    />
  );
};