一个方法包你搞定万年历
关于JavaScript的日历组件,网上百度一大堆,Bootstrap的Daterpicker比较全面,比较不错;不过要用上的话,依赖文件比较多,我有些代码洁癖的,so,我得研究研究到底用不用;
经研究发现,万年历,无论要怎么切换,归根到底其实就是一个方法的事,抱着积极的码农乐观主义精神,我必须和大家分享下;只要这一个方法,包你能扩展出你想要的、百度得到的各种日历组件;
少废话了,上代码:
function Dater(y,m,d) {
var date=new Date();
var y=y||date.getFullYear(),
m=m||date.getMonth()+1,
d=d||date.getDate();
var isLeapYear=function(years){
return (years % 4 == 0 && years % 100 != 0) || (years % 400 == 0)?true:false;
}
var getFirstDay=function(y,m,d){
var d=new Date(y,m,d);
d.setDate(1);
return d.getDay();
}
var getMonthDay=[31,isLeapYear(y)?29:28,31,30,31,30,31,31,30,31,30,31];
var prem=[],im=[],nextm=[],lastmd=getMonthDay[m-2<0?11:m-2];
if (getFirstDay(y,m-1,d)==0) {
for (var i = 6; i >=0; i--) {
prem[6-i]=lastmd-i;
}
}else {
for (var i = getFirstDay(y,m-1,d); i >0; i--) {
prem[getFirstDay(y,m-1,d)-i]=lastmd-i+1;
}
}
for (var i = 0; i < getMonthDay[m-1]; i++) {
im[i]=i+1;
}
var nextlen=42-(prem.length+getMonthDay[m-1]);
for (var i = 0; i < nextlen; i++) {
nextm[i]=i+1;
}
this.monthDays={
preMonthDays:prem,
thisMonthDays:im,
nextMonthDays:nextm
}
};
console.log(new Dater(2016,5,21).monthDays);
纯纯的JavaScript,无任何依赖;
可能大家看出来了,这尼玛返回了三个数组,和日历毛关系啊;不要急,把这三个数组拼起来,点一下你电脑右下角的时间,对着看下就知道了;是不是能对应上了?
然后你可以随便自定义样式,各种切换什么的,只需要循环一个6*7的日历模板即可,传入该方法年月日,就妥妥的;
原文来自:花满楼的博客
共同学习,写下你的评论
做到第4步,页面显示空白;也没有报错;
app.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/', { templateUrl: 'partials/home.html' }) .otherwise({ redirectTo: '/' }); }]);
像是此处没有跳转
以下这段对Angular与Express的整合描述的到位。感谢译者。
我溢出了视图中之前的内容(Welcom to Express)添加了一个带有 ng-view 的 div。这个属性告诉Angular在当前dom下渲染视图。通过这个设置,用户首次进入主页时,Jade视图将会在服务端渲染并且返回给客户端。在实际项目中,站点视图将有基础的模板()例如导航条,logo等)。它也有一个内容区(通过 ng-view 声明)由Angular来渲染视图。当用户通过应用来访问页面时,Angular将用不同的Angular视图来替换内容区域。这样避免了整个页面的刷新从而带来了更好的效果。这就是我们称这些应用为单页应用的原因:从本质上说只有一个页面被完整地从服务器下载,然后其他子页面只是简单的用来替换内容区。
作者其他优质文章
现在app.config报错了。不知道为什么
app.config(['$routeProvider', function($routeProvider){
^
TypeError: app.config is not a function