mymth
commented
2 years ago Since you call the Datepicker constructor with the end-date input not destroying previously added datepicker in the blur event listener of #novo (I think it's the same element as input[name="foo"]), the following things happen every time when #novo loses the focus (no matter whether you select/change the date or not).
- The picker elements of previously added datepickers remain in the page.
- All the event listeners of them are also kept on the elements they were bound to. (end-date input, \<body>, etc.)
- The constructor inserts a new picker element right after the end-date input and adds new event listeners to the end-date input, \<body>, etc.
- This means the new picker element is added between the input element and the previously added picker elements.
Then, since all the previously added picker elements and event listeners keep functioning, when the end-date input gets the focus, all the picker elements show up at exactly the same position. And since the firstly-added picker stays at the last item of the picker elements, it's always displayed on the top of all other picker elements. As a result, you keep seeing the same picker although a new picker with updated minDate is actually added behind the picker you see.
You are trying to make it in a bit tricky way. It can be done like this. https://codepen.io/mymth/pen/mdXrzZQ
italoneves
Put the minimum date of the second entry according to the first entry. I tried the example below but it only updates the minDate on the first selection. Then the second input is out of date.
The datapickerRange doesn't work because it still allows the user to click on a previous date in the second input, I wanted it to be blocked.