I am using react-dates library, DateRangePicker and trying to show calendar when component is rendered.
I thought there would be props supported by react-dates itself but after an hour of searching I could not find it.
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;
Is there a callback function that I can use as a leverage to keep opening the calendar?
or should I change default set of 'react-dates/lib/css/_datepicker.css'?
I reviewed the source code of react-dates and you need to add this to always show picker.
const [focus, setFocus] = useState('startDate');
Hope this should work.