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

【问题标题】：Bootstrap-datepicker: seemingly unpredictable behaviourBootstrap-datepicker：看似不可预测的行为
【发布时间】：2017-06-25 11:42:43
【问题描述】：

我正在使用bootstrap-datepicker，但我的行为很奇怪。有时它会正确加载，有时则不能：

当它正确加载时，当单击打开按钮（生成的 html）时，此元素将附加到 body 元素：

<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。

需要js配置：

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>

谢谢

【问题讨论】：

标签： jquery angularjs twitter-bootstrap requirejs bootstrap-datepicker

【解决方案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']
  }
})

【讨论】：