Bootstrap3 datetimepicker在AngularJs中使用实例

本文主要是介绍Bootstrap3 datetimepicker在AngularJs中使用实例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

推荐使用这个版本：Bootstrap3 datetimepicker控件之smalot的使用

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

在AngularJs中使用实例：

HTML代码：

<div class="container" ng-app="myApp" ng-controller="myCtrl"><div class="row"><div class='col-sm-6'><div class="form-group"><label>选择日期：</label><!--指定 date标记--><div class='input-group date' datetimepicker  id='datetimepicker1'><input type='text' class="form-control"  ng-model="dateOne"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div><p>结果：{{dateOne}}</p></div><div class='col-sm-6'><div class="form-group"><label>选择日期+时间：</label><!--指定 date标记--><div class='input-group date' id='datetimepicker2'><input type='text' class="form-control" ng-model="dateTwo" /><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div><p>结果：{{dateTwo}}</p></div></div>
</div>

JS代码：

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {//在Controller中绑定选择控件var datepicker1 = $('#datetimepicker1').datetimepicker({format: 'YYYY-MM-DD',locale: moment.locale('zh-cn')}).on('dp.change', function (e) {var result = new moment(e.date).format('YYYY-MM-DD');$scope.dateOne = result;$scope.$apply();});$('#datetimepicker2').datetimepicker({format: 'YYYY年MM月DD日 hh:mm',locale: moment.locale('zh-cn')}).on('dp.change', function (e) {var result = new moment(e.date).format('YYYY年MM月DD日 hh:mm');$scope.dateTwo= result;$scope.$apply();});
});