PickDtae.js 6.62 KB
/**
 * @author zzf
 */
/**
 *  提货日期组件 
 */
var PickDtae = function(_view, _date, _hours, _fun){
	var _bDelivery = true;
	var _vSelfDelivery = null;
	var _sDelivery = '';
	var _sDay = '';
    var _sTime = '';
    var _FullYear = '';
    var self = this;
    var scope = [];
    var _day = 0;
    var addClass = "on";
    var View = null;
    var ishover = true;
    
	function addEvent (){
		//数字移动
        View.find('.data li').hover(function(){
			var _row = $(this).attr('row');
			var _col = $(this).attr('col');
			if(_vSelfDelivery){
				_vSelfDelivery.removeClass(addClass);
			};
			_sTime = View.find('.date-delivery .time span').eq(parseInt(_row) - 1).html();
			_sDay = View.find('.date-delivery .date span').eq(parseInt(_col) - 1).html();
			_FullYear = View.find('.date-delivery .date span').eq(parseInt(_col) - 1).attr('years');
			
			if($.browser.msie){
				_sDay = _sDay.replace( '<BR>' , '<br>' );
				_sDay = _sDay.split( '<br>' );
			}else{
				_sDay = _sDay.split('<br>');
			};
			$(this).addClass(addClass);
			_vSelfDelivery = $(this);
            console.log(_sTime);
		}, function(){
			if(_bDelivery){
				$(this).removeClass(addClass);
			};
		});

        View.find('.data').live({
            mouseenter:function(){},
            mouseleave:function(){
            if(_vSelfDelivery){
                _vSelfDelivery.addClass(addClass);
            };
        }});
        View.find('.data li').bind('click', function(){
            if($(this).hasClass('disabled')){
                return false;
            };
            console.log(_sTime);
            $(this).addClass(addClass);
            _vSelfDelivery = $(this);
            View.find('.date-delivery').hide();
            _sTime = _sTime.split('-');
            View.find('input.inp1').val(_FullYear+'-'+_sDay[0]+' '+_sTime[0]+'-'+_sTime[1]);
            _fun(_FullYear+'-'+_sDay[0]+' '+_sTime[0], _FullYear+'-'+_sDay[0]+' '+_sTime[1]);
            _bDelivery = false;
            View.find('.date-delivery').hide();
            View.unbind();

            return false;
        });

        $(document).click(function(event){
            var thisview = event.target;
            if(isContain(View, thisview)){
                $('.date-delivery').hide();
                View.find('.date-delivery').show();
                _bDelivery = true;
                return false;
            }else{
                View.find('.date-delivery').hide();
            };
        });



        View.find('.o-chg').live('click', function(){
            $('.date-delivery').hide();
            View.find('.date-delivery').show();
            _bDelivery = true;
        });

        setValues();
	};

    // 判断是否为自身或者子集
    function isContain( elem, cur ){
        var _in = false;

        $( elem ).each(function() {

            if( this == $( cur )[0] || $( this ).find( cur ).length ) {
                _in = true;
            }
        });

        return _in;
    }

    //设置默认第一个
    function setValues (){
        View.find(".data li").each(function(){
            if(! $(this).hasClass("disabled")){
                $(this).trigger("mouseenter");
                $(this).trigger("click");
                return false;
            }
        });
    };

	var weeks = ['日', '一', '二', '三', '四', '五', '六'];
	//初始化
	this.start = function(){
        if(_view instanceof jQuery){
            View = _view;
        }else{
            View = $(_view);
        };
		_day = Math.ceil(_hours / 24);
		var _stime = '';
		var _strtime = 0;
		var _periodDtae = _date.split(' ');
		_stime = _periodDtae[1];
		_stime = _stime.split(':');
		_stime = parseInt(_stime[0]);
		var _remainder = (_hours - (24 - _stime)) % 24;
		var _periodView = '';
		
		for (var i=0; i < 4; i++) {
		   if(_stime < (i * 6)){
		      _periodView += '<li class="'+(i === 3 ? "checkbox cross" : "checkbox")+'" col="1" row="'+(i + 1)+'" data-status="0">可选</li>';
		      _strtime = (i * 6);
		   }else{
		   	  _periodView += '<li class="'+(i === 3 ? "checkbox disabled cross" : "checkbox disabled")+'" col="1" row="'+(i + 1)+'" data-status="0"></li>';
		   };
		};
		if(_remainder > 0){
			_day += 1;
		};
		var _ndate = new Date(_periodDtae[0]);
		for (var i=0; i < _day; i++) {
		    var _Year = 0;
		   _Year = _ndate.getTime() + i * 24 * 60 * 60 * 1000 +  _stime * 60 * 60 * 1000;	  
		   var isDate = new Date(_Year);
		   scope.push({'date':(isDate.getMonth()+1)+'-'+isDate.getDate(), 'Day':'周'+weeks[isDate.getDay()], 'hours':(isDate.getHours() + 1), 'years':isDate.getFullYear(), 'isdate':isDate.toLocaleDateString()});
		};
		var _dateView = '';
		var thisDate = new Date();
		for (var i=0; i < scope.length; i++) {
		    _dateView += '<span col="'+(i+1)+'" years="'+scope[i].years+'" row="-1">'+scope[i].date+'</BR><div class="line"><i '+(thisDate.toLocaleDateString() == scope[i].isdate ? ' class="cat" ' : "")+'></i></div>'+scope[i].Day+'</span>';
		};
		var _s_view = '';
		var _s_i = 2;
		scope.shift();
		for (var i=0; i < scope.length; i++) {
			_s_view += '<ul '+(i === (scope.length - 1) ? 'class="end"' : '')+'>';
			if(i != (scope.length - 1)){
				_s_view += '<li class="checkbox" val="" col="'+(_s_i+i)+'" row="1" data-status="0" >可选</li>'
						   +'<li class="checkbox" val="" col="'+(_s_i+i)+'" row="2" data-status="0" >可选</li>'
						   +'<li class="checkbox" val="" col="'+(_s_i+i)+'" row="3" data-status="0" >可选</li>'
						   +'<li class="checkbox cross" val="" col="'+(_s_i+i)+'" row="4" data-status="0" >可选</li>';
			}else{
				for (var k=0; k < 4; k++) {
				    if(_remainder > (k * 6) || _remainder == 0){
						_s_view += '<li class="'+(k === 3 ? "checkbox cross" : "checkbox")+'" val="" col="'+(_s_i+i)+'" row="'+(k+1)+'" data-status="0" >可选</li>';
					}else{
						_s_view += '<li class="'+(k === 3 ? "checkbox disabled cross" : "checkbox disabled")+'" val="" col="'+(_s_i+i)+'" row="'+(k+1)+'" data-status="0" ></li>';
					};
				};
			};
			_s_view += '</ul>';
		};
		
		var view = '<input type="text" class="inp1 iptText iptDate" readonly="true" />'
					+'<div class="o-chg"></div>'
					+'<div class="date-delivery">'
					+'<div class="inner"><dl class="th"><dt><i class="icon-time1"></i></dt><dd class="date">'+_dateView+'</dd><dd class="time">'
					+'<span col="-1" row="1">00:00-06:00</span>'
					+'<span col="-1" row="2">06:00-12:00</span>'
					+'<span col="-1" row="3">12:00-18:00</span>'
					+'<span col="-1" row="4">18:00-24:00</span></dd></dl></div>'
					+'<div class="data"><ul>'+_periodView+'</ul>'+_s_view+'</div></div>';

        View.append( view );
        View.find('.date-delivery').width((101 + (51 * _day)));
		addEvent();
	};
	
	self.start();
	
	return this;
};