2

I added 2 animated GIF for more specificity to the problem.

Hello I work a react project to combine airbnb/react-dates with a timepicker custom component.

The workflow is:
1. User choses a day on the 1st opened calendar <SingleDatePicker />
2. <SingleDatePicker> is hidden and a timepicker component is shown.
3. User choses a time and timepicker, calendar date/time updated, and then its hidden.
4. 2nd <SingleDatePicker> is enabled, focused & opened.
5. Same procedure as the 1st <SingleDatePicker>

Problem

I cant destinquish when to show the timepicker and when not. This is because of the focusChange function : focusChange({ focused }, calendar, timePicker) { // handle the visiblility of calendars & timepickers this.setState({ [calendar]: focused, [show${timePicker}]: !focused }); }

cases:
1. Calendar is open, user clicks outside => calendar closes but timepicker opens. (Should hide timepicker as well)
See GIF:
enter image description here 2. User choses day & choses time (1st calendar) => 2nd calendar opens. When we click interchangable between the calendars (Inputs), 1st & 2nd, there is always the opposite timepicker opened.
See GIF:

enter image description here

You can play on Live example: https://codesandbox.io/s/5v459yrwk4?fontsize=14

What i need, is to know when the calendar closes bacause of a day selection, so to open the timepicker, and when it closes because of a clickoutside so not to display a timepicker.

Any help is welcome.

Theo Itzaris
  • 4,321
  • 3
  • 37
  • 68
  • You are already showing timepicker with handleDatesChange. If I remove it from focusChange I see only one problem and that is closing timepicker on outside click. Or did I misunderstand your post? – user8672473 May 19 '19 at 01:13
  • If you remove timepicker from `focusChange` it will displays when you click detween calendars (actually when you click on the texts of each calendar) – Theo Itzaris May 19 '19 at 07:48

0 Answers0