arqex / arqex/react-datetime

toggle datepicker via renderInput prop

Open
#557 2 comments 10 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2k
Forks
858
PR merge metrics
No merged PRs in 30d

Description

### I'm Submitting a ...

```
[ ] Bug report
[ ] Feature request
[x] Support request
```

### Steps to Reproduce

This is just one of many permutations that fall just short of fully working. The close/open Fns are not being called unless provided directly to the `onClick` though I am then unable to toggle the local state for tracking if the calendar is open or not to manage other elements in the view.

This is taken from the following example in the docs here: https://github.com/YouCanBookMe/react-datetime#customize-the-input-appearance

I don't want two buttons though, just one that toggles.
```
renderInput(props, openCalendar, closeCalendar) {
const { isFocused } = this.state;
const handleToggle = () => {
isFocused ? closeCalendar() : openCalendar();
this.setState({ isFocused: !this.state.isFocused });
}

return
}

render() {
return (



)
```
### Expected Results

I would expect the above to be able to toggle the calendar open/closed

### Actual Results

Only the arrow direction changes from up to down. No calendar appears.

I think the approach for this would likely make use of the `open` prop, but there are some issues blocking that from working as documented in other currently open issues.

Contributor guide

Open the contributing guide

Research direction

Start with the documented `renderInput` example in the linked react-datetime customization docs and trace how `openCalendar`, `closeCalendar`, and the `open` prop are handled. Reproduce the single-button toggle case, then verify that the calendar opens and closes while the component's local focus state remains synchronized.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.