Jquery 一旦添加到html页面，引导datetimepicker就不会出现

一直在做一件事，在JSFIDLE中：

HTML:

JS

现在，在When框中，在jsfiddle中，它似乎工作得很好。datetimepicker出现在下面，以此类推

因此，我将它添加到我的主html页面，在那里它应该是实时的，一切都进行得很顺利，除了datetimepicker已经停止出现在JSFIDLE演示中。主HTML:h//p://new.fishpal.com

---

如果我使用chrome开发工具将display:block应用于datetimepicker菜单，它就会出现，但默认情况下它应该这样做，所以有点遗漏

所以问题是jquery版本不匹配。datetimepicker在jquery>vr3中似乎工作得不太好

---

回滚到2.x版本的最后一个版本，它立即开始工作

所以我刚刚注意到，JSFIDLE链接中的jQ是vr1.11.3，而HTML中的jQ是vr3.2.1，这反过来导致了这种攻击：它不起作用：(

<form class="form-inline">
  <div class="col-md-4 form-group" id="riversCol">
    <input name="rivers" id="rivers" placeholder="Where" ng-model="selected" typeahead="river for river in states | filter:$viewValue | limitTo:8" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" aria-autocomplete="list" aria-expanded="false"
    aria-owns="typhead-3-3802" type="text">
    <i class="fa fa-map-marker icon" aria-hidden="true"></i>
  </div>
  <div class="col-md-3 form-group" id="whenCol">
    <input type="text" class="form-control" id='weeklyDatePicker' placeholder="Select Week">
    <i class="fa fa-calendar icon" aria-hidden="true"></i>
  </div>
  <div class="col-md-3 form-group" id="whatCol">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="whatBtn"> <span class="text" id="whatTotal"><span class="day-count">0</span> days, <span class="rod-count">0</span> rod/s</span>
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <div class="selector"> <strong class="">Days</strong>

        <div class="selection days" data-count="0" data-id="day">
          <button type="button" class="btn btn-default btn-sm minus"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
          </button> <span class="count">0</span>

          <button type="button" class="btn btn-default btn-sm plus" id="what"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>

          </button>
        </div>
      </div>
      <div class="selector"> <strong class="">Rods</strong>

        <div class="selection days" data-count="0" data-id="rod">
          <button type="button" class="btn btn-default btn-sm minus"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
          </button> <span class="count">0</span>

          <button type="button" class="btn btn-default btn-sm plus"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-2" id="searchBtnCol">
    <button type="submit" class="btn btn-primary" id="searchBtn">Search</button>
  </div>
</form>

.bootstrap-datetimepicker-widget .datepicker-days table tbody tr:hover 
{

 background-color: #eee;

}



/* CSS used here will be applied after bootstrap.css */


#rivers {

width: 500px;
border-radius: 0 !important;
}

#whatBtn {
  border-radius: 0 !important;
}

#weeklyDatePicker {
  width: 100%;
  border-radius: 0 !important;
}

#riversCol {
  padding-right: 0px;
}

#whenCol {
  padding-left: 0px;
  padding-right: 0px
}

#whatCol {
  padding-left: 0px;
  padding-right: 0px;
  width: inherit;
}

#whatTotal {
  color: gray;
}

#searchBtnCol {
  padding-left: 0px;
}

#searchBtn {
  border-radius: 0 !important;
}

.input-group-btn>* {
  border-radius: 0 !important;
}

.dropdown-toggle .text {
  margin-right: 20px;
}

.dropdown-menu>.selector {
  padding: 5px 20px;
  strong {
    line-height: 30px;
  }
  .selection {
    float: right;
    margin-left: 40px;
    height: 30px;
    .count {
      display: inline-block;
      width: 20px;
      text-align: center;
    }
  }
}

.icon {
  float: right;
  margin-right: 8px;
  margin-top: -24px;
  position: relative;
  z-index: 1;
  color: #337ab7;
    }

.form-control:focus,
.dropdown-toggle:focus {
  border-bottom-color: #337ab7;
  border-bottom-width: thick;
    }

#searchForm {
  position: absolute;
  top: 10%;
  left: 10%;
    }

#whatCol > div {
  min-width: inherit;
  border-bottom-color: #337ab7;
  border-bottom-width: thick;
}

    .open>.dropdown-toggle.btn-default:hover {
  border-color: #337ab7;
    }

  // Prevent dropdown menu from closing on clicks inside it
  var dropdown = $('.dropdown-toggle').parent();
  dropdown.on('show.bs.dropdown', function() {
dropdown.data('closeable', true);
  }).on('click', function(event) {
if ($(event.target).closest('.dropdown-toggle').length) {
  dropdown.data('closeable', true);
} else {
  dropdown.data('closeable', false);
}
  }).on('hide.bs.dropdown', function(event) {
var closeable = dropdown.data('closeable');
dropdown.data('closeable', true);

    return closeable;
  });

  $('.selection').each(function() {
    var $this = $(this);
    var dropdownCount = $('.dropdown-toggle').find('.' +         
 $this.data('id') +             
   '-count')
    var count = $this.data('count')

    $this.find('.minus').on('click', function(event) {
      if (count === 0) {
        //do nothing
            return;
      } else {
        count--;
       $this.data('count', count);
       dropdownCount.text(count);
           $this.find('.count').text(count);
      }
    });

    $this.find('.plus').on('click', function(event) {
      count++;
      $this.data('count', count);
      dropdownCount.text(count);
      $this.find('.count').text(count);
    });
  });
  /*--------------END--------------*/


      $(document).ready(function() {
    moment.locale('en', {
      week: {
        dow: 1
      } // Monday is the first day of the week
    });

    //Initialize the datePicker(I have taken format as mm-dd-yyyy, you     
 can             
    //have your owh)
    $("#weeklyDatePicker").datetimepicker({
      format: 'DD-MM-YYYY'
    });

    //Get the value of Start and End of Week
    $('#weeklyDatePicker').on('dp.change', function(e) {
      var value = $("#weeklyDatePicker").val();
      var firstDate = moment(value, "DD-MM-YYYY").day(1).format("DD-MM-        
 YYYY");

  $("#weeklyDatePicker").val(firstDate);
});
  });