Hey I have set up a react dates functionality on my app, however the date, when chosen doesnt make the calendar close.
I have the example here on https://codesandbox.io/s/magical-dubinsky-xuxkj?file=/src/App.js:0-681
import React, { useState } from "react";
import { SingleDatePicker } from "react-dates";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
const CreateGroupEvent = (props) => {
const [dob, setDob] = useState(null);
const [focused, setFocused] = useState(false);
const setDate = (date) => {
setDob(date);
setFocused(false);
};
return (
<>
<SingleDatePicker
date={dob}
// {...input}
onOutsideClick={true}
numberOfMonths={1}
onDateChange={setDate}
focused={focused}
onFocusChange={setFocused}
id="dob"
/>
</>
);
};
export default CreateGroupEvent;
** EDITED : Here is my example code sandbox.
How about trying this?
According to its document, onFocusChange
seems to should take { focused : boolean }
objects as parameters.
const onFocusChange = ({ focused }) => {
setFocused(focused);
};
<SingleDatePicker
date={dob}
onOutsideClick={true}
numberOfMonths={1}
onDateChange={setDate}
focused={focused}
onFocusChange={onFocusChange}
id="dob"
/>