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

问题描述

我正在使用react-dates library，DaterangePicker并尝试在渲染组件时显示日历。

我以为反应日期本身会支持道具，但是经过一个小时的搜索我找不到它。

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”？

解决方法

我查看了反应日期的源代码，您需要将其添加到始终显示选择器中。

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

希望这应该可行。