jquery - angularJSアプリケーションでブートストラップ日付ピッカーが機能しない

Question

Angular アプリケーションで datepicker を使用しようとしていますが、Angular Datepicker を統合できませんでした。基本的なテーマで提供されている datepicker を試してみてください。

angularと統合するまでは正常に機能していました。

これは、日付ピッカー HTML の入力です。

<div class="col-lg-4 col-sm-4 col-xs-6 mobile-width">
    <input class="form-control form-control-inline input-medium date-picker" size="16" type="text" value="" />
    <span class="help-block"> Select date </span>
</div>

すべての CSS と JS を簡単に提供します。index.html に含めました。

CSS:

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
<link href="assets/css/font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/uniform.default.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />

<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<link href="bower_components/datatables/media/css/jquery.dataTables.min.css" rel="stylesheet" />

<link href="bower_components/angular-datatables/dist/css/angular-datatables.min.css" rel="stylesheet" type="text/css" />
<link href="bower_components/angular-datatables/dist/plugins/bootstrap/datatables.bootstrap.min.css" rel="stylesheet" type="text/css" />
 <link href="bower_components/angular-toastr/dist/angular-toastr.css" rel="stylesheet" type="text/css" />
<!--  <link href="bower_components/angularjs-datepicker/src/css/angular-datepicker.css" rel="stylesheet" type="text/css" />
-->
 <link href="assets/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css" />
 <!-- END PAGE LEVEL PLUGINS -->

 <!-- BEGIN THEME GLOBAL STYLES -->
 <link href="assets/css/components-md.min.css" rel="stylesheet" id="style_components" type="text/css" />
 <link href="assets/css/plugins-md.min.css" rel="stylesheet" type="text/css" />

 <!-- END THEME GLOBAL STYLES -->
 <!-- BEGIN THEME LAYOUT STYLES -->
 <link href="assets/css/layout.min.css" rel="stylesheet" type="text/css" />
 <link href="assets/css/blue.min.css" rel="stylesheet" type="text/css" id="style_color" />

日付ピッカーは、bootstrap-datepicker3.min.css を使用します

JS-

<script src="bower_components/jquery/dist/jquery.min.js"></script>

  <script src="bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
  <script src="bower_components/angular/angular.min.js"></script>
  <script src="assets/js/datatable.js" type="text/javascript"></script>

  <script src="bower_components/angular-datatables/dist/angular-datatables.min.js"></script>
  <script src="bower_components/angular-datatables/dist/plugins/bootstrap/angular-datatables.bootstrap.min.js"></script>

 <!--  <script src="assets/js/datatable.js" type="text/javascript"></script>
  <script src="assets/js/datatables.min.js" type="text/javascript"></script>
  <script src="assets/js/datatables.bootstrap.js" type="text/javascript"></script> -->


  <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
  <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
  <script src="bower_components/angular-animate/angular-animate.js"></script>
  <script src="bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script>
  <script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
  <script src="bower_components/angular-httpi/lib/httpi.js"></script>
  <script src="bower_components/http/http.min.js"></script>
  <!-- <script src="bower_components/angularjs-datepicker/src/js/angular-datepicker.js"></script> -->
  <!-- <script src="bower_components/angular-material/angular-material.min.js"></script> -->


  <script src="app/scripts/app.js"></script>
  <script src="app/scripts/config/routes.js"></script>
  <script src="app/scripts/config/environment/connections.js"></script>
  <script src="app/scripts/config/environment/environment.js"></script>
  <script src="app/scripts/config/api/api.js"></script>
  <script src="app/scripts/login/services/login.service.js"></script>
  <script src="app/scripts/login/controllers/login.controller.js"></script>


  <script src="app/scripts/company/services/company_service.js"></script>
  <script src="app/scripts/company/controllers/company_controller.js"></script>

  <script src="app/scripts/user/services/user_service.js"></script>
  <script src="app/scripts/user/controllers/user_controller.js"></script>

  <script src="app/scripts/group/services/group_service.js"></script>
  <script src="app/scripts/group/controllers/group_controller.js"></script>



  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
  <script src="assets/js/jquery.uniform.min.js" type="text/javascript"></script>
  <script src="assets/js/jquery.cokie.min.js" type="text/javascript"></script>
  <script src="assets/js/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
  <script src="assets/js/jquery.slimscroll.min.js" type="text/javascript"></script>
  <script src="assets/js/bootstrap-switch.min.js" type="text/javascript"></script>
  <!-- END CORE PLUGINS -->
  <!-- BEGIN PAGE LEVEL PLUGINS -->

  <!-- <script src="assets/js/datatables.min.js" type="text/javascript"></script> -->
  <!--  <script src="assets/js/datatables.bootstrap.js" type="text/javascript"></script> -->
  <!-- <script src="./js/table-datatables-buttons.min.js" type="text/javascript"></script> -->

  <script src="assets/js/bootstrap-datepicker.min.js" type="text/javascript"></script>


  <script src="assets/js/navbar.js" type="text/javascript"></script>
  <!-- END PAGE LEVEL PLUGINS -->
  <!-- BEGIN THEME GLOBAL SCRIPTS -->
  <script src="assets/js/morris.min.js" type="text/javascript"></script>

  <script src="assets/js/app.min.js" type="text/javascript"></script>
  <script src="assets/js/components-date-time-pickers.min.js" type="text/javascript"></script>
  <!-- END THEME GLOBAL SCRIPTS -->
  <!-- BEGIN PAGE LEVEL SCRIPTS -->
  <script src="assets/js/dashboard.min.js" type="text/javascript"></script>
  <!-- END PAGE LEVEL SCRIPTS -->
  <!-- BEGIN THEME LAYOUT SCRIPTS -->
  <script src="assets/js/layout.min.js" type="text/javascript"></script>
  <!-- END THEME LAYOUT SCRIPTS -->

私が間違っているかもしれないと感じているのは、バージョン 3.0.0 の Bower Component Jquery があり、これは私の他の角度統合の多くに必要です。

そして、私はバージョン1.11.3のjqueryの独自のコピーを持っていますが、競合していますか？

インデックスファイルに両方を含めました。Bower コンポーネントの Jquery を削除しようとすると、アプリケーション全体がクラッシュします。

両方持っていても、Datepicker が機能しません。

Metronic テーマ - http://keenthemes.com/preview/metronic/theme/admin_1/components_date_time_pickers.html

私が統合しようとしている最初のデフォルトの日付ピッカー。

または、他のDatepickerも統合できてもかまいません。

どこが間違っているのかわかりません。手伝ってください

jquery - angularJSアプリケーションでブートストラップ日付ピッカーが機能しない

0 に答える 0

Related

Reference