Angularjs手写日历的实现代码（不用插件)

本文介绍了Angularjs手写日历的实现代码（不用插件),分享给大家，具体如下：

效果：

Html:

div class=' plan _ content _ box ' data-ng-init=' show time()' div class=' field ' style=' width : 100%；'span class=' field _ label ' style=' width : 100%；文本对齐：中心选择id=' time _ year ' ng-change=' change _ year(select _ year)' ng-model=' select _ year ' ng-options=' x . id为x .值为x in all _ year '！-选项值=' 1900 ' 1900/选项-/选择年select id=' time _ month ' ng-change=' change _ month(select _ month)' ng-model=' select _ month ' ng-options=' x . id为十.整个月中x的值/select月{ {活动_天}}日/span/div table class=' table-table-bound hover _ TD ' style=' border : none；tr id='float_td' td星期日运输署/运输署星期一运输署/运输署星期二运输署/运输署星期三运输署/运输署星期四运输署/运输署星期五运输署/运输署星期六/td td ng-repeat='按$索引跟踪的天数ng-click=' change _ day(day)' ng-class=' { true : ' active '，false : ' ' }[day==active _ day]' ng-model=' day ' { day } }/TD/tr/table/div js :

//创建日历$ scope。all _ year=[]；$ scope。all _ month=[]；$scope.showTime=function() { //在挑选中填入年份对于(var年份=2016年；2050年；year){ var obj _ 1={ ' value ' : year，' id ' : year } $ scope。全年。push(obj _ 1)；} //在挑选中填入月份for(var month=1；第13个月；month){ var obj _ 2={ ' value ' : month，' id ' : month } $ scope。整个月。push(obj _ 2)；}控制台。日志($ scope)。全年)//初始化显示当前年和月$scope.show_now() } //当挑选的选中的选择权发送变化的触发的事件$scope.change_year=函数（数据){ $scope.showDays(数据，$ scope。select _ month)} $ scope。change _ month=函数（数据){ $ scope。显示天数($ scope)。选择_年，数据)} //返回指定的月份的天数月份1-12 $scope.calDays=函数（年、月){返回新日期（年、月、0)。getDate()；} $ scope。天数=[]；//展示指定的年和月的所有日期$scope.showDays=函数（年、月){ $ scope。天数=[]；//得到表示指定年和月的一日的那个时间对象var日期=新日期（年、月- 1、1);//1.先添加响应的空白的li:这个月一号是星期几，就添加几个空白的Li var dayOfWeek=date。getday()；//得到一日是星期几for(var I=0；我大有来头；I){ $ scope。几天。push(')；} //计算一个月有多少天var daysOfMonth=$scope.calDays(年、月);//2.从一号开始添加里为(var I=1；i=daysOfMonthI){ $ scope。几天。push(I)} $作用域。active _ day=' ' $作用域。select _ year=' ' $ scope。select _ month=' '//初始化显示当前年和月$ scope。show _ now=function(){ var now=new Date()；//$('#time_year ').瓦尔(现在。getfull year())；//$('#time_month ').瓦尔(现在。get month)(1)；$ scope。active _ day=现在。getdate()；$ scope。选择_年份=现在。getfull year()；$ scope。选择_月=现在。get month()1；$ scope。showdays($ scope。选择_ year，$ scope。select _ month)} $ scope。change _ day=函数(day){ $ scope。active _ day=' ' $作用域。active _ day=day }//以上是创建日历以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。