首页 > 代码库 > angular 使用ui.bootstarp 时间（年月日，小时分钟）
angular 使用ui.bootstarp 时间（年月日，小时分钟）
在下才疏学浅，不足之处，还望各位多多指教。
不废话，直接上代码：
<!DOCTYPE html><html lang="en" ng-app="indexApp"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="http://www.mamicode.com/js/toaster.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="http://www.mamicode.com/js/angular.js"></script> <script src="http://www.mamicode.com/js/angular-animate.js"></script> <script src="http://www.mamicode.com/js/toaster.js"></script> <script src="http://www.mamicode.com/js/ui-bootstrap-tpls-1.3.3.min.js"></script></head><body ng-controller="indexCtrl"><h4>Date</h4><div class="col-sm-10"> <div class="col-sm-1 text-center">开始时间</div> <div class="col-sm-3"> <p class="input-group"> <!--close-text="Close" 文本显示’清除‘按钮--> <!--is-open="vm.date.startOpened" 是否显示日期选择器--> <!--uib-datepicker-popup 默认显示日期格式为yyyy-MM-dd--> <!--datepicker-options="vm.date.endDateOptions" 配置时间的区间--> <input type="text" class="form-control" uib-datepicker-popup ng-model="vm.date.startTime" is-open="vm.date.startOpened" close-text="Close" placeholder="开始时间"/> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="vm.date.startOpen($event)"> <i class="glyphicon glyphicon-calendar"></i> </button> </span> </p> </div> <div class="col-sm-2" style="margin-top: -34px"> <!--hour-step="vm.date.hstep" 使用按钮增加或减少 小时 数--> <!--minute-step="vm.date.mstep" 使用按钮增加或减少 分钟 数--> <!--show-meridian="false" 是否使用12h（为真则是12小时制），默认为真--> <uib-timepicker ng-model="vm.date.startTime" ng-change="changed()" hour-step="vm.date.hstep" minute-step="vm.date.mstep" show-meridian="false"> </uib-timepicker> </div> <div class="col-sm-1 text-center">结束时间:</div> <div class="col-sm-3"> <p class="input-group"> <input type="text" class="form-control" uib-datepicker-popup ng-model="vm.date.endTime" is-open="vm.date.endOpened" close-text="Close" placeholder="结束时间"/> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="vm.date.endOpen($event)"> <i class="glyphicon glyphicon-calendar"></i> </button> </span> </p> </div> <div class="col-sm-2" style="margin-top: -34px"> <uib-timepicker ng-model="vm.date.endTime" ng-change="changed()" hour-step="vm.date.hstep" minute-step="vm.date.mstep" show-meridian="false"></uib-timepicker> </div> <div class="col-sm-2" style="height:100px;"></div> <div class="col-sm-3 "> <button class="btn btn-defalut pull-right" ng-click="showS(vm.date.startTime)"> start show! </button> </div> <div class="col-sm-4 "> <button class="btn btn-defalut pull-right" ng-click="showE(vm.date.endTime)"> end show! </button> </div></div><toaster-container toaster-options="{‘position-class‘: ‘toast-top-right‘, ‘close-button‘:true}"></toaster-container><script> angular.module(‘indexApp‘,[‘ui.bootstrap‘,‘toaster‘]) .controller(‘indexCtrl‘, function ($scope,toaster,$filter) { $scope.vm = { date:{ //默认不显示 startOpened:false, endOpened:false, //点击显示，$event阻止默认行为和 stopPropagation来阻止事件的冒泡 startOpen : function($event) { $event.preventDefault(); $event.stopPropagation(); $scope.vm.date.startOpened = true; }, endOpen : function($event) { $event.preventDefault(); $event.stopPropagation(); $scope.vm.date.endOpened = true; }, //默认开始结束时间 startTime : new Date(‘Jan 1,2016,00:00‘), endTime : new Date(), hstep : 1, mstep : 15, //设置小时分钟 timeInit:function () { $scope.vm.date.startTime.setHours( 0 ); $scope.vm.date.startTime.setMinutes( 0 ); $scope.vm.date.endTime.setHours( 23 ); $scope.vm.date.endTime.setMinutes( 59 ); } } }; $scope.vm.date.timeInit(); $scope.showS = function(start){ var kai = $filter(‘date‘)(start,‘yyyy-MM-dd HH:mm:ss‘); toaster.info(‘开始时间‘,kai); console.log(kai); }; $scope.showE = function(end){ toaster.info(‘结束时间‘,end); console.log(end); }; });</script></body></html>
执行效果如下：
注意两次提示的时间的不同,（$filter）
这个小demo我们使用了bootstarp，toaster，ui.bootstarp，$filter等内容。
需要注意的有以下几点：1.包的依赖 2.toaster的标签
angular 使用ui.bootstarp 时间（年月日，小时分钟）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。