reactjsreact-dates

SingleDatePicker by react-dates is not closing on change


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;


Solution

  • ** 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"
      />