Comments (21)
#92 my pull request might address this issue
from react-input-calendar.
@stefanomasini the issue still persist.
try it out by enabling closeOnSelect
<Calendar format={format} date={date} closeOnSelect={true} />
When you click the next or previous arrow, it closes the popup
from react-input-calendar.
The bug doesn't come up in development
from react-input-calendar.
Found the issue
setDate = (date, isDayView) => {
if (this.checkIfDateDisabled(date)) return
this.setState({
date,
inputValue: date.format(this.state.format),
isVisible: this.props.closeOnSelect && isDayView ? !this.state.isVisible : this.state.isVisible
})
prev = () => {
let prevDate = this.props.date.clone().subtract(1, 'months')
if (this.props.minDate && prevDate.isBefore(this.props.minDate, 'day')) {
prevDate = this.props.minDate
}
this.props.setDate(prevDate)
}
It's calling setDate
without the isDayView
parameter so it is undefined, so the boolean expression this.props.closeOnSelect && isDayView
will always return false
from react-input-calendar.
I made a simple fix for it, where if isDayView
is undefined then the boolean expression will only depend on the value of this.props.closeOnSelect
which is how it should be
from react-input-calendar.
I'm not sure why this bug didn't come up in development but I was able to recreate the bug if I manually set isDayView = false
inside of the setDate
function.
from react-input-calendar.
@vinnyoodles thanks for the pointers, but for some reason it didn't work for me that way and I see the problem in development
was able to solve it by adding && !_this2.props.closeOnSelect
to the if (_this2.props.onChange)
`
this.setDate = function (date, isDayView) {
if (_this2.checkIfDateDisabled(date)) return;
_this2.setState({
date: date,
inputValue: date.format(_this2.state.format),
isVisible: _this2.props.closeOnSelect && isDayView ? !_this2.state.isVisible : _this2.state.isVisible
});
if (_this2.props.onChange && !_this2.props.closeOnSelect) {
_this2.props.onChange(date.format(_this2.state.computableFormat))
}
};
`
Do you know why the onChange prop is closing the popup?
from react-input-calendar.
@leyume Are you passing onChange
as a prop?
from react-input-calendar.
Yes
<Calendar format={format} date={date} onChange={this.handleChange} closeOnSelect={true} />
handleChange( val ) { this.props.value( { value:val, name:this.props.name } ) }
from react-input-calendar.
Could you try deleting the closeOnSelect={true}
from your Calendar component @leyume, this is just a hunch
from react-input-calendar.
And undo the addition to the if statement you made earlier, to see if my hunch would fix the bug
from react-input-calendar.
But removing the closeOnSelect={true}
does not allow the popup to close when you select a date
Remember, the purpose of that is to close the popup when a date is selected (not when the prev or next are clicked)
from react-input-calendar.
I agree, that means my original bug fix is incorrect because in my situation closeOnSelect=undefined
for me, therefore the boolean value would equal false
but in your situation the boolean value would be true
. So I just wanted to see what would happen if we made it false
from react-input-calendar.
My assumption is that when this is true, the calendar will disappear
isVisible: this.props.closeOnSelect && isDayView ? !this.state.isVisible : this.state.isVisible
from react-input-calendar.
Well so I thought
But it didn't. The problem is with the "if condition" after the "setState"
if (_this2.props.onChange)
even with isDayView as undefined
from react-input-calendar.
Can you test what happens if you made
isVisible: true
from react-input-calendar.
Tried that before no show
until I returned the function just before the "if condition"
THEN IT WORKED
Just wondering why or how
from react-input-calendar.
The problem now is
onChange not working with closeOnSelect
from react-input-calendar.
Hi, great module for calendar, simple but customizable enough. Just have run across this issue though. Is there any prevision of fixing this bug any time soon on the master branch?
from react-input-calendar.
Found the issue on setDate function (line 362 on the compiled version). I fixed it by removing this line of code:
var isDayView = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];
(line 363)
and adding the parameter to the setState function:
this.setDate = function (date,isDayView) {
(line 362)
The thing is, that setDate was already being called on day cell click with that parameter, I don't really understand the logic behind the arguments length check, I tested the other functionalities and it seems that it was kinda pointless, am I missing something here?
Well it's working fine for me now, thanks anyway.
from react-input-calendar.
This is probably similar to my original fix: https://github.com/Rudeg/react-input-calendar/pull/92/files#diff-1fdf421c05c1140f6d71444ea2b27638L46
The pull request was never accepted because the tests were broken, and I never had the time to figure out how to run them. Since I'm using a different library now, I dropped the ball. But the fix is there. Someone just needs to fix the tests and merge it into master.
from react-input-calendar.
Related Issues (20)
- How to get current date onChange ? HOT 2
- How set up start of week in monday? HOT 1
- Ability to disable some specific dates HOT 1
- Update NPM package HOT 1
- Update npm packages versions
- Focus programatically
- setState on unmounted component - react warning HOT 1
- Issue open picker
- Trying to open the calendar clears entire page HOT 2
- defaultView (Start with year or month view)
- npm installation error by moment-range dependency. HOT 1
- Wrong version of moment or moment range ?
- Cannot set property 'range' of undefined HOT 1
- Uncaught TypeError: (0 , _moment2.default)(...).range is not a function HOT 1
- An incorrect date is passed when manually typing date into input element and submitting form HOT 1
- Demo page code? Blank dates and error in year HOT 1
- Passing Props to input HOT 1
- Uncaught TypeError: (0 , _moment2.default)(...).range is not a function HOT 2
- Calender Widget not working HOT 2
- Manual input - entering wrong date sets date to current date
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-input-calendar.