Question

我使用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">元素（datepicker表单元素）作为其最后一个子节点（生成的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配置：

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']
  }
})

datepicker loading：

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

我解决了。在这里发布给其他人。

由于无法保证模块加载顺序，因此在bootstrap-datepicker模块之后加载jquery-ui模块（如果在项目中使用它）时会出现问题：它会覆盖$.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：看似无法预测的行为

1 个答案: