反应日期选择器 | 日历未在选择日期时关闭

Question

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

最近我拿起了一个使用react-datepicker的项目，并且有一个问题是日历没有在选择日期时关闭。 这是一个展示这一点的 gif

我的 DatePicker 组件在这里

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>
  )
}

它在这里被使用

<div
      className={css.host}
      onKeyUp={(evt) => {
        if (evt.keyCode === 13) {
          onSearch({ startDate, endDate, text })
        }
      }}
    >
      <DatePicker
        id="startDate"
        label="Start date"
        icon={<DateStartIcon width={16} height={16} />}
        date={startDate}
        maxDate={endDate}
        onChange={(newDate: Moment) => {
          setStartDate(newDate)
        }}
        selectsStart
      />
</div>

在我的ReactDatePicker ，我尝试像这样设置onChange

onChange={(newDate: Date, e) => {
    if (newDate) {
        if (e && typeof e.preventDefault === 'function') {
            e.preventDefault();
        }
        const momentDate = moment(newDate)
        onChange(momentDate)
    }
}}

我不确定我还能在这里做什么，所以任何帮助都会很棒！

Answer 1

使用 shouldCloseOnSelect 属性为 true 以在选择后强制关闭

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

更新您正在使用showTimeSelect属性等待选择时间，然后在选择时自动关闭它。 这是 React Datepicker 的设计特性。 如果您只想选择日期并保持相同的时间并在选择日期时关闭，那么您可以使用 datepicker 中的另一个变体，即输入时间。

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

Answer 2

出现此问题是因为您将 datepicker 组件包装在<input>标记内，像这样解开 datepicker 组件：

 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} </label> <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} /> </div> ) }

你可能需要重做一些 CSS