如何设置反应日期日历始终打开？

Question

我正在使用 react-dates library、DateRangePicker 并尝试在呈现组件时显示日历。

我以为会有 react-dates 本身支持的 props，但是搜索了一个小时后我找不到它。

import React, { useState  } from 'react';
import { DateRangePicker } from 'react-dates';
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';

function Datepicker() {
  const [dateRange, setdateRange] = useState({
    startDate: null,
    endDate: null
  });
  const [focus, setFocus] = useState(null);

  const { startDate, endDate } = dateRange;

  const handleOnDateChange = (startDate, endDate) =>
    setdateRange(startDate, endDate);

  return (
      <DateRangePicker
        startDatePlaceholderText="Start"
        startDate={startDate}
        startDateId="startDate"
        onDatesChange={handleOnDateChange}
        endDatePlaceholderText="End"
        endDate={endDate}
        endDateId="endDate"
        displayFormat="MMM D"
        focusedInput={focus}
        onFocusChange={focus => setFocus(focus)}
      />
  );
}

export default Datepicker;

是否有回调函数可以用作杠杆来保持打开日历？

或者我应该更改 'react-dates/lib/css/_datepicker.css' 的默认设置吗？

Answer 1

我查看了 react-dates 的源代码，您需要添加它以始终显示选择器。

const [focus, setFocus] = useState('startDate');

希望这能奏效。

如何设置反应日期日历始终打开？

How to set react-dates calendar always open?

reactjs

react-dates