Javascript--date Calendar Control

* function is not complete, but also need to modify their own

<! DOCTYPE html>
 
 
/* Calendar control temporarily supports only input*/! (function (Win) {var options = {inputdom:document.getElementById (' txttime '),//Operation input event: ' Focus ',/    /Trigger Mode format: ' YYYY-MM-DD ',//Format min: ' 1900-1-1 ', max: ' 2099-12-31 ', fn:null}; Extension options options.extend = function (options) {for (var o in options) {//console.log (Options.haso            Wnproperty (o));            if (Options.hasownproperty (o)) {This[o] = Options[o];            }}}//public method var Common = {each:function (arrydom, fn) {var len = arrydom.length; for (var i = 0; i < len; i++) {if (typeof fn = = ' function ') {Fn.call (Arryd                Om[i]); }}},//Bind event On:function (DOM, even, FN) {dom.attachevent? dom.attachevent (                ' On ' + even, function (e) {e = e | | window.event; (E.stoppropagation && E.stoppropagation ());                if (e.cancelbubble) e.cancelbubble = false;            Fn.call (DOM, E);                }): Dom.addeventlistener (even, function (e) {e = e | | window.event;                (E.stoppropagation && e.stoppropagation ());                if (e.cancelbubble) e.cancelbubble = false;            Fn.call (DOM, E);        }, False);                }, On2:function (DOM, even, FN) {dom.attachevent? dom.attachevent (' on ' + even, function (e) { E = e | |                window.event;            Fn.call (DOM, E);                }): Dom.addeventlistener (even, function (e) {e = e | | window.event;            Fn.call (DOM, E);        }, False);            },//Get Properties Attr:function (DOM, attr, Val) {var str = ', S;                if (val) {Dom.setattribute (This.trim (attr), Val);                Attr.tolowercase () = = ' class ' && (Dom.classname = val); Attr.tolowercase () = = ' Style ' && (Dom.style.cssText = val);                } else {s = Dom.getattribute (attr);                str = s;                Attr.tolowercase () = = ' class ' && (str = dom.classname);                Attr.tolowercase () = = ' style ' && (str = dom.style.cssText);            return This.trim (str);        }},//delete attribute Removeattr:function (DOM, attr) {dom.removeattribute (attr); },//To determine if there is a class hasclass:function (DOM, str) {return new RegExp (' \\b ' + str + ' \\b '). Test (DOM.        ClassName); },//Add Class Addclass:function (DOM, CLS) {This.hasclass (DOM, CLS) | | |            (Dom.classname + = "+ CLS);        Dom.classname = This.trim (dom.classname); },//delete class Removeclass:function (DOM, CLS) {var c = This.trim (CLS), Reg = new RegExp (' \\b ' +            C + ' \\b '); if (This.hasclass (DOM, c)) {Dom.classname = This.trim (Dom.className.replace (Reg, ")); }},//Remove space before and after Trim:function (s) {//remove more space S = s.tostring () | |            ‘‘;        Return S.replace (/^\s*|\s*$/g, ");            }, Mouseenter:function (DOM, fn) {var f = true;            if (dom.attachevent) {This.on (DOM, "MouseEnter", FN);                        } else {This.on (DOM, "MouseOver", function (e) {if (f) {                        var mya = (e.srcelement? e.srcelement:e.target); var parent = E.relatedtarget | |                        E.fromelement;                            while (parent && parent! = DOM) {try {parent = Parent.parentnode;}                        catch (e) {break;} if (parent! = DOM) {f = (function () {Fn.call (DOM, e); return true;                        })();       }                    }         }); }}, Mouseleave:function (DOM, FN) {if (dom.attachevent) {This.on (DOM, "Mousele            Ave ", FN); } else {This.on (DOM, "Mouseout", function (e) {var mya = (e.srcelement? e.                    Srcelement:e.target); var parent = E.relatedtarget | |                    E.toelement;                        while (parent && parent! = DOM) {try {parent = Parent.parentnode;}                    catch (e) {break;}                } if (Parent! = this) {Fn.call (DOM, e);}            });    }        }    }; var Dates = {//complement Digit:function (m) {return +m < 10?        ' 0 ' + m:m;            },//date format can be date but array can also be string parse:function (date, format) {var _index = 0;            if (typeof date = = ' String ') date = This.toarry (date);            if (date = = null) return '; COnsole.log (date); Format = Format | |            ' Yyyy-mm-dd HH:mm:ss '; Return Format.replace (/yyyy| mm|dd|            hh|mm|ss/g, function (str, index, s) {return dates.digit (date[_index++]);        }); },//received the specified date now:function (timestamp, format) {var _parsestr, _date = new Date ((timestamp | 0)?                function () {var _datenow = new Date (); if (timestamp >= 86400000) {return timestamp + _datenow.gethours () * 3600000 + _datenow.getminutes (                ) * 60000 + _datenow.getseconds () * 1000;            } return 86400000 * timestamp + _datenow.gettime ();            } (Timestamp): New Date); _PARSESTR = [_date.getfullyear (), (_date.getmonth () + 1), _date.getdate (), _date.gethours (), _date.getminutes (), _            Date.getseconds ()];                return {//returns string Totime:this.parse (_PARSESTR, format),//return array Toarry: _parsestr            }; },//Date serialization Toarry:function (TIMESTR) {var aryy = this.            Isdate (Timestr, true);//date correctly returns the date array [Yyyy,mm,dd,hh,mm,ss] if (!ARYY) return null;        return aryy; },//Verify date, set second parameter can return now date array [Yyyy,mm,dd,hh,mm,ss] Isdate:function (DATESTR, Isreturn) {var _date Reg =/^ ((\d{4}) (-|\/) (\d{1,2}) \3 (\d{1,2})) ((\d{1,2}):(\d{1,2}):(\d{1,2}))? $/,//2015-1-43 3:3:44| | 2015-1-43 99:99:99 _date, _result, _yyyy, _mm, _dd, _hh = 0, _mm = 0, _ss = 0            , _istrue = false;                if (_datereg.test (DATESTR)) {//Verify format is correct _result = _datereg.exec (DATESTR);//datestr.match (REG);                Console.log (_result);                if (_result = = null) return false;                _yyyy = _result[2];                _MM = +_result[4]-1;                _DD = _result[5]; if (_result[6]! = undefined && _result[6]! = ") {_hh =_RESULT[7];                    _MM = _result[8];                _SS = _result[9];                } _date = new Date (_yyyy, _mm, _dd, _hh, _mm, _SS); _istrue = (_date.getfullyear () = = _yyyy && _date.getmonth () = = _mm && _date.getdate () = = _dd && _d                Ate.gethours () = = _hh && _date.getminutes () = = _mm && _date.getseconds () = = _SS); Return (_istrue && (Isreturn && [_yyyy, (_mm + 1), _DD, _hh, _mm, _ss])) | |            _istrue;            } else {return false; }},//Run year judgment Leapyear:function (years) {if ((year% = = 0 && Yearly% 400 = = 0) | |            Year% 4 = = 0) return true;        return false;    }    };        var domtrtarget = document.getElementById (' Trtarget '), Domfc = document.getElementById (' fc-date-table '),//container domyyyy = document.getElementById (' Input-yy '), dommm = document.getElementById (' Input-mm '), domfc_l = document.getElementById (' fc-ico-l '),//Previous Month Domfc_r = document.getElementById (' fc-ico-r '),//After  January td_this_class = ' fc-foucs-this ',//current TD style Td_no_class = ' NO-FC ';//NOTD-style var timeout1 = false;//Deferred input    Blur occurs var _arrym_d = [31, NULL, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var _nowarry = Dates.now (). toarry;//Date array var _nowday = new Date (_nowarry[0] + '/' + _nowarry[1] + '/1 '). GetDay ();//day of the week var _arrydom = [];//td-d Om page array var fcdate = {//Data write memory prevents user tampering with Options: {thisyyyy:null,//Current year Thismm:null            ,//Current month thisdd:null,//current date thishh:null, Thismm:null, Thisss:null, Maxyyyy:null, Minyyyy:null},//Create a focus event for the target Dom Ondom:function () {var _            Cur = this, _focusdom = Options.inputdom; _cur.            Init (); Common.on (_focusdom, ' Focus ', function () {TIMEOUT1= true;                Console.log (This.offsetheight + "," + This.offsettop + ', ' + this.offsettop);                Domtrtarget.style.top = this.offsetheight + this.offsettop + ' px ';                Domtrtarget.style.left = this.offsetleft + ' px ';            Domtrtarget.style.display = ' block ';            }); Common.on2 (document, ' click ', Function (e) {var _target = E.target | | e.srcelement if (_tar                    get = = = _focusdom) {//console.log (_focusdom);                Return                    } if (timeout1) {domtrtarget.style.display = ' none ';                TIMEOUT1 = false;            }//console.log (TIMEOUT1);        });            },//main function init:function (opt) {var _thisnewarry;            if (opt) {options.extend (opt); } if (Common.trim (options.inputdom.value)! = ") {_thisnewarry = DatEs.toarry (Options.inputdom.value); _nowarry = _thisnewarry | |                _nowarry; _nowday = (_thisnewarry && (this. Getfirstday (_thisnewarry[0], _thisnewarry[1])) | |            _nowday; } this.            OPTIONS.THISDD = _nowarry[2]; This.            Leapyear (_nowarry[0]); This.            Setyyyymm (3, _nowarry); This.            Cearttbody (); This.            BINDFN ();        _thisnewarry = null;            },//CREATE TABLE Cearttbody:function () {var _cur = this;            Console.log (Domfc.getelementsbytagname (' tbody '). length); if (Domfc.getelementsbytagname (' tbody '). Length > 0) {for (var i = 0, j = domfc.getelementsbytagname (' TB Ody '). length; I < J;                i++) {domfc.removechild (Domfc.getelementsbytagname (' tbody ') [i]);            }} var _tbody = document.createelement (' tbody '), _tr = null; for (var i = 0; i < i++) {if (i = = 0 || i = = 7 | | i = = 14 | | i = = 21 | | i = = 28 | |                    i = = +) {_tr = document.createelement (' tr ');                _tbody.appendchild (_TR);                } var _td = document.createelement (' TD ');  if (i >= _nowday && i < (_arrym_d[_nowarry[1]-1] + _nowday)) {var _day = i-_nowday +                    1;                    _td.innerhtml = _day;                    Common.attr (_TD, ' data-y ', _nowarry[0]);                    Common.attr (_TD, ' data-m ', _nowarry[1]);                    Common.attr (_TD, ' data-d ', _day); This.                    Isday (_TD, _day);                _arrydom.push (_TD);                } else {Common.addclass (_td, Td_no_class);            } _tr.appendchild (_TD);            } domfc.appendchild (_tbody); TD Tick Event Common.on2 (_tbody, ' click ', Function (e) {var _target = E.target | | e.srcelement, _now Time = New Date (), _newtime; if (_target.tagname.tolowercase () = = = ' td ' && _target.nodetype = = 1 &&!                    Common.hasclass (_target, Td_no_class)) {(E.stoppropagation && e.stoppropagation ());                    if (e.cancelbubble) e.cancelbubble = false; _newtime = Dates.parse (common.attr (_target, ' data-y ') + '/' + common.attr (_target, ' data-m ') + '/' + common.attr (_target,                    ' data-d ') + ' + _nowtime.gethours () + ': ' + _nowtime.getminutes () + ': ' + _nowtime.getseconds (), Options.format);                    if (!_newtime) {alert (' note, inside is tampered with! '); return;}                    if (Common.hasclass (_target, Td_this_class)) {return false;                    } common.each (_arrydom, function () {Common.removeclass (this, td_this_class);                    });                    Common.addclass (_target, Td_this_class);       Console.log (_newtime);             _cur.                    OPTIONS.THISDD = common.attr (_target, ' data-d ');                    Options.inputdom.value = _newtime;                    Domtrtarget.style.display = ' None ';                Console.log (this);        }            }); },//Determine the current selected date Isday:function (TD, Day) {if (this.            OPTIONS.THISDD = = Day) {Common.addclass (TD, Td_this_class); }},//write input setinput:function () {},//Bind event Bindfn:function () {var _            cur = this; Previous January Event Common.on (domfc_l, ' click ', Function (e) {_cur.                SETYYYYMM (1); _cur.            Change ();            }); Next month event Common.on (domfc_r, ' click ', Function (e) {_cur.                Setyyyymm (2); _cur.            Change ();        }); },//Date changed change:function () {_nowday = this.            Getfirstday (Domyyyy.value, Dommm.value); _nowarry = [DOmYYYY.value.toString (), domMM.value.toString ()]; This.            Leapyear (_nowarry[0]); This.        Cearttbody ();            },//Run year judgment Leapyear:function (years) {if (Dates.leapyear (year)) _arrym_d[1] = 29;        _ARRYM_D[1] = 28;            },//Set current date setyyyymm:function (type, arry) {var yyyy = +domyyyy.value, MM = +dommm.value; Switch (type) {case 1:if (MM = = 1) {Domyyyy.value = yy                        Yy-1;                    Dommm.value = 12;                    } else {dommm.value = Dates.digit (MM-1);                } break;                        Case 2:if (MM = =) {Domyyyy.value = yyyy + 1;                    Dommm.value = Dates.digit (1);                    } else {dommm.value = Dates.digit (MM + 1);  }                  Break                    Case 3:domyyyy.value = arry[0];                    Dommm.value = Dates.digit (+arry[1]);            Break }},//month of 1st Getfirstday:function (year, MM) {return new Date (year + '/' + MM + '/1 ')        . GetDay ();    }    }; Win.    Fcdates = function () {Fcdate.ondom.call (fcdate);}; Fcdates ();}) (window);
　　
Javascript--date Calendar Control