jquery - Bootstrap-datepicker:看似不可预测的行为

Question

我正在使用bootstrap-datepicker我有一个奇怪的行为。有时加载正确，有时加载不正确:

正确加载后，此元素将附加到 body单击打开按钮时的元素(生成的 html):

<div class="datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-top" style="top: 376px; left: 218.656px; z-index: 10; display: block;">
  <div class="datepicker-days" style="">
    <table class="table-condensed">
      <!-- [...] -->
    </table>
  </div>
</div>

其他时候(大多数时候)此元素还存在于 body 中作为最后一个主体的子节点(生成的 html，#ui-datepicker-div 中没有内部 html):

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
</div>

而且这个元素仍然存在于打开按钮之后。即这被附加到 <div id="startdate-container">元素(日期选择器表单元素)作为其最后一个子节点(生成的html):

<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display: block;">
  <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
    <!-- [...] -->
  </div>
  <table class="ui-datepicker-calendar">
    <!-- [...] -->
  </table>
</div>

上下文详细信息:我在 angularjs (1.6.x) 指令中使用它，并使用 requirejs。

需要配置:

requirejs.config({
  paths: {
    jquery: 'bower_components/jquery/dist/jquery.min',
    bootstrapDatepicker: 'bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min'
  },
  shim: {
    jquery: { exports: 'jquery' },
    bootstrapDatepicker: ['jquery']
  }
})

日期选择器加载:

define([
  'angular',
  'bootstrapDatepicker',
  'bootstrap',
  'css!bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.standalone.min.css'
], function (angular) {
  angular.module('App', [])
  .directive('taskCreator', [function () {

    return {
      restrict: 'E',
      replace: true,
      require: '^parentController',
      templateUrl: 'templates/template.html',
      link: function link(scope, el, attrs, controller) {

        $('#startdate-container').datepicker({
          format: "dd/mm/yyyy",
          weekStart: 1,
          maxViewMode: 3,
          todayBtn: "linked",
          multidate: false,
          daysOfWeekDisabled: "0",
          autoclose: true,
          todayHighlight: true
        });
      }
    };
  }]);
})

指令的模板:

<div class="form-group">
  <label for="startDate" class="col-sm-2 control-label">Start:</label>
  <div id="startDate" class="col-sm-10">
    <div id="startdate-container" class="input-group date">
      <input type="text" class="form-control">
      <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
    </div>
  </div>
</div>

谢谢

Answer 1

我解决了。在这里为其他人发帖。

由于无法保证模块加载顺序，因此当 jquery-ui 模块(如果您在项目中使用它)在 bootstrap-datepicker 模块之后加载时会出现问题:它会覆盖 $.fn.datepicker

尽管 bootstrap-datepicker 不依赖于 jquery-ui，但您可以通过编辑 requirejs 配置来解决问题，强制其先于 bootstrap-datepicker 加载:

requirejs配置解决:

requirejs.config({
  paths: {
    jquery: 'bower_components/jquery/dist/jquery.min',
    jqueryui: 'bower_components/jquery-ui/jquery-ui.min',
    bootstrapDatepicker: 'bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min'
  },
  shim: {
    jquery: { exports: 'jquery' },
    jqueryui: ['jquery'],
    bootstrapDatepicker: ['jquery', 'jqueryui']
  }
})