0

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;
Dani Mesejo
  • 61,499
  • 6
  • 49
  • 76
Eddsters
  • 458
  • 1
  • 4
  • 16

2 Answers2

1

** 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"
  />
Won Gyo Seo
  • 424
  • 3
  • 8
  • That doesnt, work, my setState function of setFocused does that anyways... – Eddsters Dec 12 '20 at 09:27
  • @Eddsters It works well when I try. check it out [here](https://codesandbox.io/s/hardcore-silence-jwjuw?file=/src/App.js). – Won Gyo Seo Dec 12 '20 at 09:32
  • Hey you are right, i think the problem was that the input should have been typecasted as an object `({ focused })` like so, thank you so much!! Apologies for not catching that. – Eddsters Dec 12 '20 at 09:36
0

This seems to be a version related quirk -- if you just do:

onFocusChange={(focusedInput)=> setFocused(focusedInput.focus)}

it'll work.

Dharman
  • 30,962
  • 25
  • 85
  • 135
yamardr
  • 11
  • 2