我用的是npm安装
先安装
npm install angular-ui-bootstrap
再安装
npm install bootstrap
安装了之后目录结构如下
使用方法就是使用angular-ui-bootstrap的ui-bootstrap-tpls.js 和 bootstrap的bootstrap.css
试着调用了下angular-ui-bootstrap的时间插件
代码如下
test.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"/>
<title></title>
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
<style>
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
</style>
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<h4>Inline</h4>
<div style="display:inline-block; min-height:290px;">
<div uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="options"></div>
</div>
</div>
<script>
var app=angular.module('myapp',['ui.bootstrap']);
app.controller("myctrl",function($scope){
function getDayClass(data) {
var date = data.date,
mode = data.mode;
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
for (var i = 0; i < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
}
return '';
}
$scope.dt=(new Date()).getTime()
$scope.options = {
minDate: new Date(),
showWeeks: true
};
})
</script>
</body>
</html>
效果如下：
