0

我正在尝试在我的 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 -->

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

我有我自己的 jquery 副本,它的版本是 - 1.11.3,我不知道它是否冲突。

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

即使我有两个 Datepicker 也不工作。

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

我正在尝试集成的第一个默认日期选择器。

或者即使我也可以集成任何其他 Datepicker,我也不介意,

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

4

0 回答 0