CODEWITHSUNDEEP
jquery-uijquery-ui-datepicker
devSuper
devSuper

Reputation: 395

jQuery Multiple Datepicker Issue

I need two date pickers on the same page side by side. A very minor but majorly annoying issue I am having is when I click on any date picker, I cannot edit the other date picker if I click this other date picker directly. I have to click somewhere outside and then again click the second date picker to open it.

The datepicker I am using only shows month and year which is the requirement but I don't think that is an issue.

Here is the fiddle I have recreated to show the issue. https://jsfiddle.net/qpnjf6uu/

Steps to replicate the issue -

  1. Click on from date
  2. Without making any selection, click on To Date.

The date picker on ToDate does not open, which is the issue. I want it to open without user having to click somewhere outside first.

The code to initialise the datepicker is like 

$("#TaxPointDateFrom").datepicker({
showAnim: "fold",
changeMonth: true,
dateFormat: "MM-yy",
changeYear: true
});

Oddly though, it works as expected on this fiddle - http://jsfiddle.net/Fa8Xx/4138/, but I have no idea why.

Upvotes: 0

Views: 537

Answers (1)

Michelle Tan
Michelle Tan

Reputation: 395

if you get rid of the (showAnim: "fold") option, it works perfectly, or you can use other animation like "slideDown". Apparently, this might be a bug in jQuery-UI where if you use the "fold" animation, it only works on odd or even number of inputs if you do not click outside of the box.

However it worked on the demo one because it has a different library, if you remove the theme library, it behaves as the bug you have mentioned. So I would suggest to not use "fold" as the animation.

$("#TaxPointDateFrom").datepicker({
    changeMonth: true,
    dateFormat: "MM-yy",
    changeYear: true
});

Upvotes: 3

Related Questions