Bootstrap3 datetimepicker在AngularJs中使用实例

原文链接

关于 datetimepicker的使用，参考：http://blog.youkuaiyun.com/u011127019/article/details/51725081

在AngularJS中使用实例：

HTML代码：

[html]  view plain  copy

 print ?

1. <div class="container" ng-app="myApp" ng-controller="myCtrl">  
2.     <div class="row">  
3.         <div class='col-sm-6'>  
4.             <div class="form-group">  
5.                 <label>选择日期：</label>  
6.                 <!--指定 date标记-->  
7.                 <div class='input-group date' datetimepicker  id='datetimepicker1'>  
8.                     <input type='text' class="form-control"  ng-model="dateOne"/>  
9.                     <span class="input-group-addon">  
10.                         <span class="glyphicon glyphicon-calendar"></span>  
11.                     </span>  
12.                 </div>  
13.             </div>  
14.             <p>结果：{{dateOne}}</p>  
15.         </div>  
16.         <div class='col-sm-6'>  
17.             <div class="form-group">  
18.                 <label>选择日期+时间：</label>  
19.                 <!--指定 date标记-->  
20.                 <div class='input-group date' id='datetimepicker2'>  
21.                     <input type='text' class="form-control" ng-model="dateTwo" />  
22.                     <span class="input-group-addon">  
23.                         <span class="glyphicon glyphicon-calendar"></span>  
24.                     </span>  
25.                 </div>  
26.             </div>  
27.             <p>结果：{{dateTwo}}</p>  
28.         </div>  
29.     </div>  
30. </div>  

js代码：

[javascript]  view plain  copy

 print ?

1. var app = angular.module('myApp', []);  
2. app.controller('myCtrl', function ($scope) {  
3.     //在Controller中绑定选择控件  
4.     var datepicker1 = $('#datetimepicker1').datetimepicker({  
5.         format: 'YYYY-MM-DD',  
6.         locale: moment.locale('zh-cn')  
7.     }).on('dp.change', function (e) {  
8.         var result = new moment(e.date).format('YYYY-MM-DD');  
9.         $scope.dateOne = result;  
10.         $scope.$apply();  
11.     });  
12.   
13.     $('#datetimepicker2').datetimepicker({  
14.         format: 'YYYY年MM月DD日 hh:mm',  
15.         locale: moment.locale('zh-cn')  
16.     }).on('dp.change', function (e) {  
17.         var result = new moment(e.date).format('YYYY年MM月DD日 hh:mm');  
18.         $scope.dateTwo= result;  
19.         $scope.$apply();  
20.     });  
21. });  

更多：

Bootstrap3 datetimepicker控件的使用

RequireJS实例

基于Bootstrap的jQuery slider插件的使用bootstrap-slider.js