1.背景介绍
日历在网页中的应用有很多，比如说后台的搜索功能，备忘录功能等等。要实现日历功能，有很多插件可以实现， 利用angular实现相关的日历功能的插件也就只有几个，
比如说ui-jquery,angular-datepicker,ui-bootstrap等等，
这些都可以实现部分功能的日历插件；因为做任务的时候用的是ui-bootstrap的日历插件，所以今天主要讲ui-bootstrap的日历插件
2.知识剖析
引入库：ui-bootstrap-tpls.js
在ui-bootstrap这个日历插件中，有以下相关属性。
uib-datepicker-popup :显示日期格式ng-model:绑定当前时间is-open：控制日历插件是否打开close-text：关闭按钮的文本clear-text: 清空按钮的文本current-text：返回当前日期的文本alt-input-formats：手动输入日期时可接受的格式
3.常见问题
如何实现设置开始日期和结束日期
4.解决方案
/x/page/u06713a9hrz.html
5.代码实战
<html ng-app="ui.bootstrap.demo"><head><meta charset="UTF-8"><link rel="stylesheet" href="css/bootstrap.min.css"><script src="js/angular/angular.min.js"></script><script src="js/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script><!-- <script src="js/angular-locale_zh-cn.js"></script> -->//中文插件<script>angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('Datepicker', function($scope) {//基础设置$scope.format = "yyyy/MM/dd";$scope.altInputFormats = ['yyyy/M!/d!'];//第一个日历$scope.dat1 = new Date();$scope.popup1 = {opened: false};$scope.open1 = function() {$scope.popup1.opened = true;};//第二个日历$scope.dat2 = new Date();$scope.popup2 = {opened: false};$scope.open2 = function() {$scope.popup2.opened = true;};});</script></head><body ng-controller="Datepicker"><div><p class="form-group"><div class="input-group"><input type="text" class="form-control"uib-datepicker-popup="{{format}}"ng-model="dat1"is-open="popup1.opened"close-text="关闭" clear-text="清空"current-text="今天"alt-input-formats="altInputFormats" /><!--逐条分析uib-datepicker-popup yyyy-MM-dd 显示日期格式ng-model="dat1" 绑定今天时间is-open="popup1.opened" 控制时间控件开启和关闭close-text/clear-text/current-text 按钮组的文本alt-input-formats 手动输入日期时可接受的格式--><span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button></span></div></p></div><!--第二个日历--><div><p class="form-group"><div class="input-group"><input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dat2" is-open="popup2.opened" close-text="关闭" clear-text="清空" current-text="今天" alt-input-formats="altInputFormats" /><span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button></span></div></p></div></body></html>
6.拓展思考
如何修改日历的样式，比如说把英文（默认）修改为中文日历？
引入 angular-locale_zh-cn.js//中文插件
7.参考文献
插件下载地址：
/angular-ui-bootstrap/
转中文：
/angular/angular.js/tree/master/src/ngLocale
8.更多讨论
Q1：日历插件怎么实现禁止点击效果，点击不会出现日历；
通过对日历所在的input标签中设置disabled属性，则点击之后不会出现日历；
Q2：官网后台日历插件使用的是angular-strap插件，与这个插件相比有什么特殊的地方；
angular-datepicker插件有很多相关属性，可以自行定义一组想要的日历。不过官网的日历插件更易上手，因为需要配置的属性很少。
Q3：如何实现不能在日历中输入内容的效果，但是又可以实现日历功能？
这个就在angular-datepicker插件的input标签中输入readly只读属性，就能够完成只读功能啦
如果觉得《angularjs如何使用时间插件》对你有帮助，请点赞、收藏，并留下你的观点哦！
