ziqim/zhiqim_ui/src_extend/zhiqim_calendar_month.js

/*
 * 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
 * 
 * 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
 *
 * 本文采用《知启蒙登记发行许可证》，除非符合许可证，否则不可使用该文件！
 * 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
 * 2、您用于商业用途时，必须在原作者指定的登记网站，按原作者要求进行登记；
 * 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
 * 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
 * 5、您可以在以下链接获取一个完整的许可证副本。
 * 
 * 许可证链接：http://zhiqim.org/licenses/zhiqim_register_publish_license.htm
 *
 * 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
 */
 
+(function(Z)
{//BEGIN 

Z.Month = Z.Class.newInstance();
Z.Month.v = "1.4.0";
Z.Month.prototype = 
{
    defaults: 
    {
        top: 0,                                     //和指定的对象相差上位置
        left: 0,                                    //和指定的对象相差左位置
        
        selectYear: null,                           //选中的年,要求数字
        selectMonth: null,                          //选中的月,要求数字
        
        element: null,                              //当前对象
        elemDate: null,                             //选中的时间
        currDate: new Date()                        //保存当前时间
    },
    
    init: function()
    {
        this.id = Z.random(10);//日历ID,为保证唯一在init随机生成
        
        this.html ='<div id="Z_Month_'+this.id+'" style="position:absolute;display:none;z-index:1000;">';
        this.html+='<table class="z-table z-calendar">';
        
        //选择年月
        this.html+='<tr>';
        this.html+='    <td>';
        this.html+='    <table class="z-table z-top">';
        this.html+='    <tr>';
        this.html+='        <td width="30" align="center" class="z-pointer" id="Z_Month_prev_'+this.id+'"><div class="z-arrow z-left"></div></td>';
        this.html+='        <td width="*" align="center" class="z-year-month" id="Z_Month_year_'+this.id+'"><span class="z-default"></span></td>';
        this.html+='        <td width="30" align="center" class="z-pointer" id="Z_Month_next_'+this.id+'"><div class="z-arrow z-right"></td>';
        this.html+='    </tr>';
        this.html+='    </table>';
        this.html+='    </td>';
        this.html+='</tr>';
        
        //当前星期
        this.html+='<tr>';
        this.html+='    <td>';
        this.html+='    <table class="z-table z-day z-px14 z-pd10">';
        this.html+='    <tr>';
        this.html+='        <td class="z-tomonth" id="Z_Month_month_'+this.id+'_1">一月</td>';
        this.html+='        <td class="z-tomonth" id="Z_Month_month_'+this.id+'_2">二月</td>';
        this.html+='        <td class="z-tomonth" id="Z_Month_month_'+this.id+'_3">三月</td>';
        this.html+='        <td class="z-tomonth" id="Z_Month_month_'+this.id+'_4">四月</td>';
        this.html+='    </tr>';
        this.html+='    <tr>';
        this.html+='        <td class="z-tomonth" id="Z_Month_month_'+this.id+'_5">五月</td>';
        this.html+='        <td class="z-tomonth" id="Z_Month_month_'+this.id+'_6">六月</td>';
        this.html+='        <td class="z-tomonth" id="Z_Month_month_'+this.id+'_7">七月</td>';
        this.html+='        <td class="z-tomonth" id="Z_Month_month_'+this.id+'_8">八月</td>';
        this.html+='    </tr>';
        this.html+='    <tr>';
        this.html+='        <td class="z-tomonth" id="Z_Month_month_'+this.id+'_9">九月</td>';
        this.html+='        <td class="z-tomonth" id="Z_Month_month_'+this.id+'_10">十月</td>';
        this.html+='        <td class="z-tomonth" id="Z_Month_month_'+this.id+'_11">十一月</td>';
        this.html+='        <td class="z-tomonth" id="Z_Month_month_'+this.id+'_12">十二月</td>';
        this.html+='    </tr>';
        this.html+='    <tr>';
        this.html+='        <td colspan="2" style="color:#339a99" id="Z_Month_clear_'+this.id+'">清空</td>';
        this.html+='        <td colspan="2" style="color:#339a99" id="Z_Month_close_'+this.id+'">关闭</td>';
        this.html+='    </tr>';
        this.html+='    </table>';
        this.html+='    </td>';
        this.html+='</tr>';

        //结束
        this.html+='</table>';
        this.html+='</div>';
    },
    
    execute: function()
    {
        //解析对象中年月，如果不是年月格式置为当前月
        if (!Z.V.isDate(this.element.value+"-01"))
            this.elemDate = this.currDate;
        else
        {//有值时选中月
            this.elemDate = Z.DT.toDate(this.element.value+"-01");
            this.selectMonth = this.elemDate.getMonth()+1;
        }
        
        this.selectYear = this.elemDate.getFullYear();
        
        //组装日历DIV，和设置好位置和事件
        this.height = 271;
            
        var $element = Z(this.element);
        var top = $element.offsetTopBody() + $element.offsetHeight() + this.top;
        var left = $element.offsetLeftBody() + this.left;
        
        if (top > this.height && Z.D.clientHeight() - top - this.height < 0)
        {//如果顶部够高，底部不够高时，则向上弹出
            top -= this.height;
        }

        var $calendar = Z(this.html);
        $calendar.appendTo("body").css({top:top, left:left, display:'block'});

        //当前点击时阻止冒泡，其他点击时关闭
        $calendar.click(function(e){Z.E.stop(e);});
        Z(document).click(this.close, this);
        
        //设置向左和向右移动一年
        Z("#Z_Month_prev_"+this.id).click(this.doPrevYear, this);
        Z("#Z_Month_next_"+this.id).click(this.doNextYear, this);
        
        Z("#Z_Month_clear_"+this.id).click(function(e){this.element.value="";this.close(e);}, this);
        Z("#Z_Month_close_"+this.id).click(function(e){this.close(e);}, this);
        
        //设置选择年份月份时打开年份列表事件
        Z("#Z_Month_year_"+this.id).click(this.doOpenYearList, this);
        
        //最后显示选择年份,月份信息
        this.showYear();
        this.showMonth();
    },
    
    doOpenYearList: function(e)
    {//打开选择年份列表
        var $list = Z("#Z_Month_year_"+this.id).find("ul");
        if ($list.length > 0)
            $list.remove();
        else
        {
            var min = this.selectYear - 50;
            var max = this.selectYear + 50;
            var $ul = Z("<ul></ul>").addClass("z-year-list");
            for (var i=min;i<=max;i++)
            {
                var $option = Z("<span value='" + i + "'>" + i + "年" + "</span>");
                $option.click(this.onChangeYear, this);
                if (i == this.selectYear)
                    $option.addClass("z-selected");
                $ul.append($option);
            }
            $ul.append("<span class='z-close'>关闭</span>");
            Z("#Z_Month_year_"+this.id).append($ul);
            //把滚动条移到中间位置
            $ul[0].scrollTop = $ul[0].scrollHeight/2 - 117;
        }
    },
    
    onChangeYear: function(e)
    {//修改年份
        var value = Z(Z.E.target(e)).val();
        this.selectYear = parseInt(value);
        
        Z("#Z_Month_year_"+this.id).find("ul").hide().remove();
        
        this.showYear();
        this.showMonth();
        
        Z.E.stop(e);
    },
    
    doPrevYear: function()
    {//上一年
        this.selectYear -= 1;
        this.showYear();
        this.showMonth();
    },
    
    doNextYear: function()
    {//下一年
        this.selectYear += 1;
        this.showYear();
        this.showMonth();
    },
    
    close: function(e)
    {//关闭
        var target = Z.E.target(e);
        if (target === this.element)
        {//如果是指定的元素不关闭
            Z.E.cancel(e);
            return;
        }
           
        Z(document).offclick(this.close, this);
        Z("#Z_Month_"+this.id).remove();
    },
    
    showYear: function() 
    {//显示年
        Z("#Z_Month_year_"+this.id).find(".z-default").html(this.selectYear+"年");
    },
    
    showMonth: function()
    {//显示月
        //先统一背景等数据
        for (var i=1;i<=12;i++)
        {
            Z("#Z_Month_month_"+this.id+"_"+i).removeClass("z-today").removeClass("z-selected").click(function(e)
            {
                var id = Z.E.current(e).id;
                var ind = id.lastIndexOf("_");
                this.selectMonth = parseInt(id.substring(ind+1));
                this.setSelectValue();
                this.close(e);
                
            }, this);
        }
        
        if (this.selectYear == this.currDate.getFullYear())
            Z("#Z_Month_month_"+this.id+"_"+(this.currDate.getMonth()+1)).addClass("z-today");
        
        if (this.selectMonth != null)
            Z("#Z_Month_month_"+this.id+"_"+this.selectMonth).addClass("z-selected");
    },
    
    setSelectValue: function()
    {
        this.setValue(this.selectYear + "-" + Z.S.prefixZero(this.selectMonth, 2));
    },
    
    setValue: function(newValue)
    {
        var oldValue = this.element.value;
        this.element.value = newValue;
        if (this.element.onchange && oldValue != this.element.value)
            this.element.onchange();
    }
};

Z.month = function($elem)
{
    return new Z.Month({immediate:true, element:$elem});
}

//END
})(zhiqim);