如果想要在angular 下使用bootstrap 的datepicker，首先需要引入必要的js和css包。
然后将bootstrap 的datepicker 用directive 封装起来，代码如下：
<!DOCTYPE html><html><head> <script type="text/javascript" src="jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <script type="text/javascript" src="bootstrap-datepicker.js"></script> <script type="text/javascript" src="angular.min.js"></script> <script> angular.module('myApp', []).controller('Ctrl', ['$scope', function ($scope) { }]) .directive('bDatepicker', function () { return { restrict: 'A', require: "ngModel", link: function (scope, element, attr,ngModelCtrl) { element.datepicker({ dateFormat:'dd/MM/yyyy hh:mm:ss' }).on('changeDate', function(e) { // var outputDate = new Date(e.date); // var n = outputDate.getTime(); ngModelCtrl.$setViewValue(e.date); scope.$apply(); }); var component = element.siblings('[data-toggle="datepicker"]'); if (component.length) { component.on('click', function () { element.trigger('focus'); }); } } };}); </script></head><body><div ng-app="myApp" ng-controller="Ctrl" class="span2"> <br/> {{date}} <div class="input-append"> <input type="text" b-datepicker ng-model="date" /> <button type="button" class="btn" data-toggle="datepicker"> <i class="icon-calendar"></i> </button> </div></div></body></html>
图标自己可以添加。当然可以根据使用需要调整date 的格式。