亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

一個方法包你搞定萬年歷

关于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的日历模板即可,传入该方法年月日,就妥妥的;
原文来自:花满楼的博客

點擊查看更多內容
11人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消