我正在尝试在我的 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,我也不介意,
我不知道我哪里出错了。帮帮我