Why my focus is not working properly?

Question

I have data.json file is being loaded after I focus but after I focus then my datepicker is not showing why I didn't understand. but if I focus second time I can see.. where is my mistake ?

function flattenFieldsArray(arr) {
      return arr.map(function(item) {
        return item.field
      })
    }
    $(function() {
     var focused = false;
       $(document.body).one("focus", '#checkin,#checkout', function() {
          if (!focused) {
            
      
             $.getJSON('data.json', function(data) {
      

        // use ajax data mapped to same structure as original variables
        var firstDate = flattenFieldsArray(data.firstDate);
        var lastDate = flattenFieldsArray(data.lastDate);
        var availabledays = flattenFieldsArray(data.availabledays);
        var booked = flattenFieldsArray(data.booked);;
        var ssdays = [];

        // nothing was changed below

        var dateFormat = "mm/dd/yy",
          from = $("#checkin").datepicker({
            changeMonth: true,
            numberOfMonths: 2,
            firstDay: 1,
            minDate: new Date(firstDate),
            maxDate: new Date(lastDate),
            onSelect: function(selectedDate) {
              var yenitarih = new Date();

              var date = $(this).datepicker('getDate');
              date.setTime(date.getTime() + (1000 * 60 * 60 * 24))

              $("#checkout").datepicker("option", "minDate", date);
            },

            beforeShowDay: function(date) {
              var y = date.getFullYear().toString(); // get full year
              var m = (date.getMonth() + 1).toString(); // get month.
              var d = date.getDate().toString(); // get Day
              if (m.length == 1) {
                m = '0' + m;
              } // append zero(0) if single digit
              if (d.length == 1) {
                d = '0' + d;
              } // append zero(0) if single digit
              var currDate = y + '-' + m + '-' + d;
              if (jQuery.inArray(currDate, availabledays) >= 0) {
                return [false, "ui-highlight"];
              }

              if (jQuery.inArray(currDate, booked) >= 0) {
                return [true, "ui-bos"];
              } else {
                return [true];
              }

            },
            isTo1: true,
          }).on("change", function() {
            to.datepicker("option", "minDate", getDate(this));
          }),
          to = $("#checkout").datepicker({
            changeMonth: true,
            changeYear: true,
            firstDay: 1,
            numberOfMonths: 2,
            minDate: new Date(firstDate),
            maxDate: new Date(lastDate),
            onSelect: function(selectedDate) {
              $("#checkin").datepicker("option", "maxDate", selectedDate);
            },
            beforeShowDay: function(date) {
              var y = date.getFullYear().toString(); // get full year
              var m = (date.getMonth() + 1).toString(); // get month.
              var d = date.getDate().toString(); // get Day
              if (m.length == 1) {
                m = '0' + m;
              } // append zero(0) if single digit
              if (d.length == 1) {
                d = '0' + d;
              } // append zero(0) if single digit
              var currDate = y + '-' + m + '-' + d;

              if (jQuery.inArray(currDate, booked) >= 0) {
                return [true, "ui-highlight-donus"];
              }


              if (jQuery.inArray(currDate, availabledays) >= 0) {
                return [true, "ui-bos"];
              }


              if (jQuery.inArray(currDate, ssdays) >= 0) {
                return [true, "ui-ss-donus"];
              } else {
                return [true];
              }
            }
          }).on("change", function() {
            from.datepicker("option", "maxDate", getDate(this));
          });

      })
      focused = true;
          }
       });
    


    });

.form{
  width:960px;
  margin:120px auto;
}
.form input{
  width:250px;
  padding:10px;
}
.ui-highlight .ui-state-default{background: red !important;border-color: red !important;color: white !important; cursor:no-drop;}
		.ui-bos .ui-state-default{background: green !important;border-color: green !important;color: white !important;}
		.ui-ss .ui-state-default{background: yellow !important;border-color: yellow !important;color: gray !important; cursor:help;}
		.ui-ss-donus .ui-state-default{background: yellow !important;border-color: yellow !important;color: gray !important; cursor:help;}	
		.ui-highlight-donus .ui-state-default{background: red !important;border-color: red !important;color: white !important; }	
.ui-testtarih .ui-state-default{
  background:black !important;
  color:#FFF !important;
}

<link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />

   <div class="form">
    <input type="text" id="checkin" />
    <input type="text" id="checkout" />
    <input type="submit" value="Search" />
  </div>
 
 <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>

footnote: I couldn't add my json data to stackoverflow snippet that's why I add plunker demo in plunker demo works

Click to see plunker demo

Answer 1

$.getJSON has a done() function in which you can write you logic after data is loaded. You can trigger the datepicker manually inside the done function

Here's a working fork

Answer 2

You should load your data prior to the first focus event on your datepickers.

Here's an example :

plunkr

$( document ).ready(function() {
    var data;
    $.getJSON('data.json', function (d) {
        data = d;
        console.log('data', d);
        setupDatepickers();
    });

    function setupDatepickers() {
        // use ajax data mapped to same structure as original variables
                 var firstDate = flattenFieldsArray(data.firstDate);
                 var lastDate = flattenFieldsArray(data.lastDate);
                 var availabledays = flattenFieldsArray(data.availabledays);
                 var booked = flattenFieldsArray(data.booked);;
                 var ssdays = [];

                 // nothing was changed below

                 var dateFormat = "mm/dd/yy",
                     from       = $("#checkin")
                         .datepicker({
                             beforeShowDay : function (date) {
                                 var y = date
                                     .getFullYear()
                                     .toString(); // get full year
                                 var m = (date.getMonth() + 1).toString(); // get month.
                                 var d = date
                                     .getDate()
                                     .toString(); // get Day
                                 if (m.length == 1) {
                                     m = '0' + m;
                                 } // append zero(0) if single digit
                                 if (d.length == 1) {
                                     d = '0' + d;
                                 } // append zero(0) if single digit
                                 var currDate = y + '-' + m + '-' + d;
                                 if (jQuery.inArray(currDate, availabledays) >= 0) {
                                     return [false, "ui-highlight"];
                                 }

                                 if (jQuery.inArray(currDate, booked) >= 0) {
                                     return [true, "ui-bos"];
                                 } else {
                                     return [true];
                                 }

                             },
                             changeMonth   : true,
                             firstDay      : 1,
                             isTo1         : true,
                             maxDate       : new Date(lastDate),
                             minDate       : new Date(firstDate),
                             numberOfMonths: 2,
                             onSelect      : function (selectedDate) {
                                 var yenitarih = new Date();

                                 var date = $(this).datepicker('getDate');
                                 date.setTime(date.getTime() + (1000 * 60 * 60 * 24))

                                 $("#checkout").datepicker("option", "minDate", date);
                             }
                         })
                         .on("change", function () {
                             to.datepicker("option", "minDate", getDate(this));
                         }),
                     to         = $("#checkout")
                         .datepicker({
                             beforeShowDay : function (date) {
                                 var y = date
                                     .getFullYear()
                                     .toString(); // get full year
                                 var m = (date.getMonth() + 1).toString(); // get month.
                                 var d = date
                                     .getDate()
                                     .toString(); // get Day
                                 if (m.length == 1) {
                                     m = '0' + m;
                                 } // append zero(0) if single digit
                                 if (d.length == 1) {
                                     d = '0' + d;
                                 } // append zero(0) if single digit
                                 var currDate = y + '-' + m + '-' + d;

                                 if (jQuery.inArray(currDate, booked) >= 0) {
                                     return [true, "ui-highlight-donus"];
                                 }

                                 if (jQuery.inArray(currDate, availabledays) >= 0) {
                                     return [true, "ui-bos"];
                                 }

                                 if (jQuery.inArray(currDate, ssdays) >= 0) {
                                     return [true, "ui-ss-donus"];
                                 } else {
                                     return [true];
                                 }
                             },
                             changeMonth   : true,
                             changeYear    : true,
                             firstDay      : 1,
                             maxDate       : new Date(lastDate),
                             minDate       : new Date(firstDate),
                             numberOfMonths: 2,
                             onSelect      : function (selectedDate) {
                                 $("#checkin").datepicker("option", "maxDate", selectedDate);
                             }
                         })
                         .on("change", function () {
                             from.datepicker("option", "maxDate", getDate(this));
                         });

    }
});

Answer 3

It is because, on the first focus, the datepickers are applied on the elements and NOT triggered. Mind the difference between binding an event and triggering it. On the first time focus, datepicker will be applied and NOT triggered as it is not already bound to the element. But on any subsequent focus, it would trigger the datepicker and open it since it is already bound to the element.

As a solution,you can try adding $("#checkin").datepicker('show'); and $("#checkout").datepicker('show'); after the end for $("#checkin").datepicker({}) and $("#checkout").datepicker({}), respectively.