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

Question

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

我认为 react-dates 本身会支持道具，但经过一个小时的搜索后我找不到它。

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

标签： reactjsreact-dates

Answer 1

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

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

希望这应该有效。