ブートストラップの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> 

他の回（ほとんどの回）この要素が最後の身体の子ノード（生成されたHTML、＃UI-DatePickerの - divの中がないインナーHTML）としてbodyではまだ存在している：

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

また、この要素はまだ開始ボタンの直後に存在します。私はrequirejsで、angularjs（1.6.xの）ディレクティブでそれを使用しています：

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

コンテキストの詳細：つまりこれは、その最後の子ノードとして<div id="startdate-container">要素（DatePickerのフォーム要素）（生成されたHTML）に追加されます。

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のロード：

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モジュールは（あなたのプロジェクトでそれを使用している場合）、ブートストラップ・DatePickerのモジュールの後にロードされたときに発生します。ブートストラップ日付ピッカー」はdoesnのが、それは$.fn.datepicker

を上書きしますtはあなたがブートストラップ日付ピッカーよりも以前にロードするためにそれを強制的に、あなたのrequirejsの設定を編集して、問題を解決することができますjqueryの-UIに依存します：解決する

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