日历组件

结构

var _args = {
p: $DB,
defDate:(new Date().date2Str()).split(‘ ‘)[0],//2016-1-2 10:12:32
computeM:todayM,
computeY:todayY,
dateHead:[‘日‘,‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘],
month:[{idx:1,text:1},{idx:2,text:2},{idx:3,text:3},{idx:4,text:4},{idx:5,text:5},{idx:6,text:6},{idx:7,text:7},{idx:8,text:8},{idx:9,text:9},{idx:10,text:10},{idx:11,text:11},{idx:12,text:12}],
year:itemsYear,
headClick: me._fn,
bodyClick: me._fn
}

WT.UI.F_calendar = function(j) {
    var me = this;
    me.comType = ‘F_calendar‘;
    WT.ext(me, WT.Util);
    //--------------------
    //获取年份数组，f前f年(包括当年)，n后n年
    var yearMin = 2;
    var yearMax = 2;
    var itemsYear = getNyear(yearMin,yearMax,[2016,8,2]);
    var today = new Date();
    var todayY = today.getFullYear();
    var todayM = today.getMonth()+1;
    //-------------------
    var _args = {
        p: $DB,
        defDate:(new Date().date2Str()).split(‘ ‘)[0],//2016-1-2 10:12:32
        computeM:todayM,
        computeY:todayY,
        dateHead:[‘日‘,‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘],
        month:[{idx:1,text:1},{idx:2,text:2},{idx:3,text:3},{idx:4,text:4},{idx:5,text:5},{idx:6,text:6},{idx:7,text:7},{idx:8,text:8},{idx:9,text:9},{idx:10,text:10},{idx:11,text:11},{idx:12,text:12}],
        year:itemsYear,
        headClick: me._fn,
        bodyClick: me._fn
    }
    me.args = me.initArgs(j, _args);
    var c_date, _baseDiv,_body;

    me.computDate = me.get(‘defDate‘);
    me.setTime = me.get(‘defDate‘);
    //设置年份，dStr：日期（2016-1-1）；min：相对于dstr的前min年；max：后max年
    me.setDate =function(dStr,min,max){
        me.setTime = dStr;
        var _a=dStr?dStr.split(‘-‘):me.get(‘defDate‘).split(‘-‘);
        me.args.year = getNyear(min,max,_a);
        me.args.computeM = _a[1];
        me.args.computeY = _a[0];
        me.computDate = _a;
        _baseDiv.head.h(laytpl(WT.UI.Temp.calendar_head.help()).render(me.args));
        drawMonth(dStr);
    }

    var layout = function() {
        var _b = me.base = me.get(‘p‘).adElm(‘‘, ‘div‘);
        _b = _b.adElm(‘‘, ‘div‘).cn(‘h300 w300 pa ml5 b_18 mt3‘);
        _baseDiv = new WT.UI.BaseDiv({
            p: _b,
            head_h: 50,
            foot_h: 0
        })
        _baseDiv.head.adElm(‘‘, ‘div‘).h(laytpl(WT.UI.Temp.calendar_head.help()).render(me.args));
        _body = _baseDiv.body.ac(‘mt5‘);
        drawMonth();
    }
    //画月份
    var drawMonth = function(dStr){
        var _a=dStr?dStr.split(‘-‘):me.get(‘defDate‘).split(‘-‘);
        dStr=(_a[0]+‘-‘+_a[1]+‘-‘+‘1‘);
        me.computDate = (_a[0]+‘-‘+_a[1]+‘-‘+_a[2]);
        var _d1=new Date(dStr);
        var _day = new Date(dStr).getDay();
        _d1.setDate(_d1.getDate()-_day-1);
        var _month=new Date(dStr).getMonth();
        var dTmp=‘<div class="dib"><span dStr={4} class="dib cp tac pt10 {3}" isDisabled={5} isTody={6} isSelect={7} style="height:{0}px;width:{1}px">{2}</span></div>‘;
        var _dateAry=[];
        var _h = (_body.csn(‘height‘)-4)/6-10;
        var _w = (_body.csn(‘width‘)-4)/7;

        for(var i=0;i<42;i++){
            _d1.setDate(_d1.getDate()+1);
            if(today.date2Str().split(‘ ‘)[0] === _d1.date2Str().split(‘ ‘)[0]) {//今天
                _dateAry.push(dTmp.format(_h,_w,_d1.getDate(),‘bc_17‘,_d1.date2Str().split(‘ ‘)[0],(_month==_d1.getMonth())? 0 : 1,1,0))
            }else if(me.selElm && me.selElm.attr(‘dstr‘)===_d1.date2Str().split(‘ ‘)[0]){//选中
                _dateAry.push(dTmp.format(_h,_w,_d1.getDate(),‘bc_18‘,_d1.date2Str().split(‘ ‘)[0],(_month==_d1.getMonth())? 0 : 1,0,1))
            }else{//其他
                _dateAry.push(dTmp.format(_h,_w,_d1.getDate(),(_month==_d1.getMonth())?‘c_10 F_calendar‘:‘c_17 cna‘,_d1.date2Str().split(‘ ‘)[0],(_month==_d1.getMonth())? 0 : 1,0,0))
            }
        }
        _body.h(_dateAry.join(‘‘));
    }
    //参数：1加一个月 -1 减一个月
    var monthDo = function(n){
        var _d1= new Date(me.computDate);
        _d1.setMonth(_d1.getMonth()+1*n);
        drawMonth(_d1.date2Str().split(‘ ‘)[0]);
        me.computDate=_d1.date2Str().split(‘ ‘)[0];
        var _computeD = me.computDate.split(‘-‘);
        me.args.computeM=_computeD[1];
        me.args.computeY=_computeD[0];
        return 1;
    }
    function getNyear(f,n,dStr){
        var _year = [];
        var _d=dStr?new Date(dStr[0],dStr[1],dStr[2]):new Date();
        var _nYear = _d.getFullYear();
        var _upYear = _nYear-f;
        for(var i=0; i<f+n; i++){
            _year.push({idx:i,text:++_upYear})
        }
        return _year;
    }
    var eventBind = function() {
        me.base.evt(‘click‘,function(e){
            var e = WT.e.fix(e),_e = e.t;
            e.stop();
            if(_e.attr(‘opt‘) == ‘head_month‘){//月
                _e.evt(‘change‘,function(e){
                    var _d1= new Date(me.computDate);
                    _d1.setMonth(+_e.value-1);
                    drawMonth(_d1.date2Str().split(‘ ‘)[0]);
                    me.computDate=_d1.date2Str().split(‘ ‘)[0];
                })
            }else if(_e.attr(‘opt‘) === ‘head_year‘){//年
                _e.evt(‘change‘,function(e){
                    var _d1= new Date(me.computDate);
                    _d1.setYear(+_e.value);
                    drawMonth(_d1.date2Str().split(‘ ‘)[0]);
                    me.computDate=_d1.date2Str().split(‘ ‘)[0];
                })
            }else if(_e.attr(‘opt‘) === ‘left‘){//左TODO:向左添加月份约束
                if ((+(me.setTime.split(‘-‘)[0])-yearMin+1) <= +me.computDate.split(‘-‘)[0]){
                    monthDo(-1) && _baseDiv.head.h(laytpl(WT.UI.Temp.calendar_head.help()).render(me.args));
                    //console.log(me.computDate);
                }
                else
                    alert(‘不在区间内‘);
            }else if(_e.attr(‘opt‘) === ‘right‘){//右TODO:向右添加月份约束
                if ((+(me.setTime.split(‘-‘)[0])+yearMax) >= +me.computDate.split(‘-‘)[0]){
                    monthDo(1) && _baseDiv.head.h(laytpl(WT.UI.Temp.calendar_head.help()).render(me.args));
                    //console.log(me.computDate);
                }
                else
                    alert(‘不在区间内‘);
            }else if(_e.tagName === ‘SPAN‘ && _e.attr(‘isDisabled‘) === "0"){//选中日期，显示在input中
                if (me.selElm) {
                    me.selElm.dc(‘bc_18‘);
                    me.selElm.attr(‘isSelect‘,"0");
                    if ( _e.attr(‘isTody‘) !== "0") {
                        me.selElm.ac(‘F_calendar‘);
                    }
                }
                me.selElm = _e;
                _e.dc(‘F_calendar‘);
                _e.ac(‘bc_18‘);
                me.selElm.attr(‘isSelect‘,"1");
                me.get(‘bodyClick‘)(_e);//点击日期后的回调函数，参数： _e.attr(‘dStr‘)即获取的日期
            }
        })
    }
    me.init = function() {
        layout();
        eventBind();
    }
    if (arguments.length) {
        me.init();
    }
    return me;
}

字符串模板
calendar_head: function() {
        /*
            <div class="tac p2">
                <span opt="left" class="fa fa-arrow-left mr30 c_13"></span>
                <div class="dib">
                    <select opt="head_month">
                        {{# for(var i=0;i<d.month.length;i++){ }}
                            {{# if(d.computeM == d.month[i].text){ }}
                                <option selected idx={{d.month[i].idx}}>{{d.month[i].text}}</option>
                            {{# }else{ }}
                                <option idx={{d.month[i].idx}}>{{d.month[i].text}}</option>
                            {{# } }}
                        {{# } }}
                    </select>
                    <select opt="head_year">
                        {{# for(var i=0;i<d.year.length;i++){ }}
                            {{# if(d.computeY == d.year[i].text){ }}
                                <option selected idx={{d.year[i].idx}}>{{d.year[i].text}}</option>
                            {{# }else{ }}
                                <option idx={{d.year[i].idx}}>{{d.year[i].text}}</option>
                            {{# } }}

                        {{# } }}
                    </select>
                </div>
                <span opt="right" class="fa fa-arrow-right ml30 c_13"></span>
                <div opt="calendarWeek" class="pt10">
                    {{# for(var i=0;i<d.dateHead.length;i++){ }}
                        <span class="m0lr5 fwb">{{d.dateHead[i]}}</span>
                    {{# } }}
                </div>
            </div>
         */
    }

写的比较久，也比较烂。。。