Question

我正在尝试在我的Angular应用程序中使用datepicker，我无法集成Angular Datepicker，所以尝试提供datepicker的基本主题。

直到我与角度整合才一直工作。

这是我对日期选择器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 -->

我觉得我可能错了， Bower Component Jquery是版本3.0.0，这是我的许多其他角度集成所必需的。

我有自己的jquery副本，版本为1.11.3，是不是我不知道有冲突。

我已将两者都包含在我的索引文件中。如果我尝试删除Bower组件的Jquery，整个应用程序崩溃。

即使我有两个Datepicker都无法正常工作。

Metronic主题 - http://keenthemes.com/preview/metronic/theme/admin_1/components_date_time_pickers.html

我想要整合的第一个Defaul Datepicker。

或者我也不介意即使我可以整合任何其他Datepicker，

我不知道我哪里错了。帮助我

Bootstrap Date Picker在angularJS应用程序中不起作用

0 个答案: