Question

我有焦点后加载data.json文件但是在我关注之后我的datepicker没有显示为什么我不理解。但如果我第二次关注，我可以看到......我的错误在哪里？

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>

脚注：我无法将我的json数据添加到stackoverflow片段，这就是我在plunker演示中添加plunker demo的原因

Click to see plunker demo

Answer 1

async function doSomething(){ let items= await fetcher.findAll() console.log(items[0].latitude) // Other code with variable items here ... }有一个$.getJSON函数，您可以在加载数据后为其编写逻辑。您可以在done函数中手动触发datepicker

这是一个有效的fork

Answer 2

这是因为，在第一个焦点上，日期选择器应用于元素而不是触发。注意绑定事件和触发事件之间的区别。在第一次聚焦时，将应用datepicker而不会触发，因为它尚未绑定到元素。但是在任何后续焦点上，它会触发datepicker并打开它，因为它已经绑定到元素。

作为解决方案，您可以尝试分别在$("#checkin").datepicker('show');和$("#checkout").datepicker('show');结束后添加$("#checkin").datepicker({})和$("#checkout").datepicker({})。

Answer 3

您应该在日期选择器上的第一个焦点事件之前加载数据。

以下是一个例子：

plunkr

if form1.is_vaild():

为什么我的焦点不能正常工作？

3 个答案: