toggle datepicker via renderInput prop
- 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
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