Question

我见过这个issue，但似乎并不能为我的问题提供任何解决方案。

最近，我选择了一个使用react-datepicker的项目，但出现了一个问题，即日历在选择日期时没有关闭。这是展示那个的gif

reactdatepicker

我的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}[![enter image description here][1]][1]
      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

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

2 个答案: