如果想要在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 的格式。