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，#[=49= 中没有内部 html ]-日期选择器-div):

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

而且这个元素还在打开按钮之后。即，它作为最后一个子节点（生成 html）附加到 <div id="startdate-container"> 元素（日期选择器表单元素）：

<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配置：

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

我解决了。 Post这里是为了其他人。

由于无法保证模块的加载顺序，因此当 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']
  }
})

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

Bootstrap-datepicker: seemingly unpredictable behaviour

jquery

requirejs

twitter-bootstrap

angularjs

bootstrap-datepicker