jQuery datapicker not working on second click

Question

can anyone help me finding the issue behind the datepicker in from and to section of http://dev.ther8server.com

When I click on from date and choose a date and again click on from datepicker doesn't pop up. I need to click on to or else somewhere in the body and then again click on from to make it functioning. I am really struggling to find the reason behind this issue. Can anybody help me with any suggestions. Thanks.

This issue is only in Chrome and Safari. It works fine in Firefox.

HTML code:

<li class="date-field" id="from">
                    <a href="#" onclick="return false;" class="calendar">opener</a>
                    <input type="text" value="Check in" name="date_in" value="" /> 
                    <div class="datepicker-holder"></div> 
                  </li>
                  <li class="date-field" id="to">
                    <a href="#" onclick="return false;" class="calendar">opener</a>
                      <input type="text" value="Check out" name="date_out"  />
                      <div class="datepicker-holder"></div>
                  </li>

Imports & JS:

  <script type="text/javascript" src="/assets/js/jquery-1.8.3.min.js"></script>


  <script src="/assets/js/frontend/jquery-ui-1.10.2.custom.js"></script>

  <script type="text/javascript" src="/assets/js/jquery.main.js"></script>
  <script type="text/javascript" src="/assets/js/main.js"></script>
  <script type="text/javascript" src="/assets/js/loadmask/jquery.loadmask.js"></script>
  <!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="/assets/css/ie.css" /><![endif]-->

  <script type="text/javascript">
  var jslocale = "en-AU";
  var ajaxload = "";

  var search_params = {"global_keywords":"","referer_page":"","keywords":"","room":false,"date_in":"","date_out":"","hotel_id":"","destination_id":"","date_in_stamp":"","date_out_stamp":"","view_type":"","trip_rating":"","star_rating":"","min_rate":"","max_rate":"","amenities":"","sort":"","all_results":"","roomCode":"","rateCode":"","bedCode":"","allStarsSelection":"","region_id":"","lang":null,"country":null,"curr":null}; 


  </script>

Answer 1

First, I don't quite get why are you using that much code to manage two simple datepickers instead of just using jQueryUI's default .

Second, I can see that you open the datepicker after the user clicks on the inputs, but the binding is linked to the focus event instead of the click event.

When you pick the date you hide the datepicker and programatically trigger the focus event to return the cursor to the input. The problem is, the focus event fires only once. It doesn't trigger again just by clicking on an alread focused element. Not until you fire the blur event by clicking outside it.

A quick and dirty suggestion for your script . Change:

input.bind('focus',function(){
                showDatepicker();
            })

to

input.bind('click',function(){
            showDatepicker();
        })