jquery datefield

54362 단어 jquery
연월일, 연월일, 연월일 시분초, 연월일 시분, 시분초, 시 6가지 드롭다운 선택 지원
moment이 필요합니다.js 플러그인을 전제로
;
(function($) {
	/**     **/
	$.i18n = $.i18n || {};
	$.i18n.week = ' ';
	$.i18n.days = [ ' ', ' ', ' ', ' ', ' ', ' ', ' ' ];
	$.i18n.shortDays = [ ' ', ' ', ' ', ' ', ' ', ' ', ' ' ];
	$.i18n.months = [ "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ",
			"  ", "  ", "  " ];
	$.i18n.shortMonths = [ "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ",
			"  ", "  ", "  ", "  " ];

	$.i18n.datepicker={
		OK:'  ',
		CLEAR:'  ',
		TODAY:'  '
	}
	
	if (!$.browser) {
		var userAgent = navigator.userAgent.toLowerCase();
		// Figure out what browser is being used
		$.browser = {
			version : (userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1],
			safari : /webkit/.test(userAgent),
			opera : /opera/.test(userAgent),
			chrome: /chrome/.test(userAgent),
			msie : /msie/.test(userAgent) && !/opera/.test(userAgent),
			mozilla : /mozilla/.test(userAgent)
					&& !/(compatible|webkit)/.test(userAgent)
		};
	}

	/**          **/
	var ele = document.createElement("input");
	var _support_placeholder = 'placeholder' in ele;
		
	//TNND IE9 WIN7     IE8 ,       IE9BUG:'opacity' in ele.style
	var ltIE9 = $.browser.msie && (!('opacity' in ele.style) || $.browser.version < 9);
	
	ele = null;
/**       **/
    moment.lang('cn', {
	    weekdays : ["   ", "   ","   ", "   ", "   ", "   ", "   "]
	});

	//     
	Date.parseDate = function(str, format) {
		
		if (!str) {return null;}

		if (Date.isDate(str)) {return str;}

		if(format){var d=moment(str, format);return d.isValid() ? d.toDate() : null;}

		var date =  moment(str,"YYYYMMDDThhmmss");
		
		!date.isValid() ? date=moment(str,"YYYYMMDDhhmmss") : false;

		!date.isValid() ? date=moment(str) : false;

		return date.isValid() ? date.toDate() : null;

	};

    //     
	Date.isDate = function(date) { return Object.prototype.toString.call(date) == '[Object Date]' || date instanceof Date;};

	//      
	Date.prototype.formatDate = function(format) {return moment(this).format(format || 'YYYY-MM-DD hh:mm:ss');};

	//    ISO 8601
	Date.prototype.getWeek = function() {return moment(this).week();};
	/**
	 * datepicker
	 * @constructor
	 */
	$.datepicker = function($element, options) {
		
		var self = this,timestamp=+new Date();

		// datetime、dateminute、date、month、time、minute
		this.type=options.type || 'date';

		//    
		this.value = Date.parseDate(options.value,this.getFormat(this.type)) || new Date();

		this.$element = $element.addClass("date-picker");
	
		options.cls && $element.addClass(options.cls);

		options.width ? $element.width(options.width) : false;
		
		options.height ? $element.height(options.height) : false;

		$element.html('<div class="view-top">'
						+'<table style="width:100%;" cellspacing=0 cellpadding=0><tbody>'
							+'<tr>'
								+'<td><span class="cell-icon icon-prev-year"></span></td>'
								+'<td><span class="cell-icon icon-prev-month"></span></td>'
								+'<td class="cell-selected-month">'+this.textMonth(this.value.getMonth() + 1)+'</td>'
								+'<td class="cell-selected-year">'+this.textYear(this.value.getFullYear())+'</td>'
								+'<td><span class="cell-icon  icon-next-month"></span></td>'
								+'<td><span class="cell-icon icon-next-year"></span></td>'
							+'</tr>'
						+'</tbody></table>'
					  +'</div>' 
					  +'<div class="view-date" style="display:block;">'
					 	+'<table style="width:100%;" cellspacing=0 cellpadding=0><tbody></tbody></table>'
					  +'</div>' 
					  +'<div class="view-month" style="display:none;">'
					 	+'<table style="width:100%;" cellspacing=0 cellpadding=0><tbody></tbody></table>'
					  +'</div>' 
					  +'<div class="view-time" style="display:none;">'
					 	+'<table style="width:100%;" cellspacing=0 cellpadding=0><tbody></tbody></table>'
					  +'</div>');

		//    
		var html=[];
		
		(this.type==='datetime' || this.type==='dateminute') && html.push('<span id="dp_'+timestamp+'_clock" class="icon-clock"></span>');
		
		options.showClear && html.push('<input type="button" id="dp_'+timestamp+'_clear" class="btn-clear" value="'+$.i18n.datepicker.CLEAR+'" />');
		
		options.showToday && html.push('<input type="button" id="dp_'+timestamp+'_today" class="btn-today" value="'+$.i18n.datepicker.TODAY+'" />');
		
		options.showOK && html.push('<input type="button" id="dp_'+timestamp+'_ok" class="btn-ok" value="'+$.i18n.datepicker.OK+'" />');
	
		html.length && $element.append('<div class="view-bottom">'+html.join("")+'</div>');
		
		this.$top=$element.find("> .view-top");

		this.$dateView=this.$top.next();
		
		this.$monthView=this.$dateView.next();
		
		this.$timeView=this.$monthView.next();
				
		this.$bottom=$element.find("> .view-bottom");
		
		if(this.type === 'date'){
			
			this.$timeView.remove();
			this.$timeView=null;

		}
		
		if(this.type === 'month'){
			
			this.$timeView.remove();
			this.$timeView=null;
			
			this.$dateView.remove();
			this.$dateView=null;
			
			this.$monthView.css("display","");

		}
		
		//      
		if(this.type==='time' || this.type==='minute'){
			
			this.$top.remove();
			this.$top=null;
			
			this.$dateView.remove();
			this.$dateView=null;
			
			this.$monthView.html("");
			this.$monthView=null;
			
			this.$timeView.css("display","");
		}

		this.showWeek = !!options.showWeek;
		
		//     /    
		this.showOtherMonth = !!options.showOtherMonth;

		//      
		this.firstDayOfWeek = options.firstDayOfWeek;
	
		//    
		this.setMaxDate(options.maxDate,true);
		
		//    
		this.setMinDate(options.minDate,true);
		
		//     
		this.setDisableDays(options.disableDays,true);
		
		//     
		this.setDisableDates(options.disableDates,false);

		var selector = "td.cell-date,td.cell-month,td.cell-year";
		
		$element
				.on("mouseover.datepicker", selector, function() {

					!/cell-disabled/.test(this.className) && $(this).addClass("cell-hover");
					
				})
				.on("mouseout.datepicker", selector, function() {

					!/cell-disabled/.test(this.className) && $(this).removeClass("cell-hover");
					
				}).on(
		"click.datepicker",
		"td.cell,.cell-icon,td.cell-selected-year,td.cell-selected-month,.icon-clock,.icon-prev-hour,.icon-next-hour,.icon-prev-minute,.icon-next-minute,.icon-prev-second,.icon-next-second,.btn-clear,.btn-ok,.btn-today",
		function(e) {
		
			//       
			var sf=self;
			
			// TIME VIEW:     
			if(/cell-hour/.test(this.className)){
				
				var date=sf.value;
		
				date.setHours(+$(this).text());
			
				sf.draw(date,"time");

				sf.trigger("timepick",!/cell-disabled/.test(this.className) && /row-time/.test(this.parentNode.className) ? false : true);
				
				return;
			}
			
			// TIME VIEW:    
			if(/cell-minute/.test(this.className)){
				
				var date=sf.value;
		
				date.setMinutes(+$(this).text());
			
				sf.draw(date,"time");
				
				sf.trigger("timepick",!/cell-disabled/.test(this.className) && /row-time/.test(this.parentNode.className) ? false : true);
				
				return;
			}
			
			// TIME VIEW:    
			if(/cell-second/.test(this.className)){
				
				var date=sf.value;
		
				date.setSeconds(+$(this).text());
			
				sf.draw(date,"time");
				
				sf.trigger("timepick",!/cell-disabled/.test(this.className) && /row-time/.test(this.parentNode.className) ? false : true);
				
				return;
			}
			
			// TIME VIEW:     
			if(/icon-prev-hour/.test(this.className)){
				
				var date=sf.value;
		
				date.setHours((date.getHours()-5+24)%24);
			
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
				return;
			}
			
			// TIME VIEW:    
			if(/icon-prev-minute/.test(this.className)){
				
				var date=sf.value;
					
				date.setMinutes((date.getMinutes()-5+60)%60);
				
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
				return;
			}
			
			// TIME VIEW:    
			if(/icon-prev-second/.test(this.className)){
				
				var date=sf.value;
				
				date.setSeconds((date.getSeconds()-5+60)%60);
				
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
				return;
			}
			
			// TIME VIEW:     
			if(/icon-next-hour/.test(this.className)){

				var date=sf.value;
				
				date.setHours((date.getHours()+5+24)%24);
				
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
				return;
			}
			
			// TIME VIEW:    
			if(/icon-next-minute/.test(this.className)){
			
				var date=sf.value;
				
				date.setMinutes((date.getMinutes()+5+60)%60);
				
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
				return;
			}
			
			// TIME VIEW:    
			if(/icon-next-second/.test(this.className)){
			
				var date=sf.value;
				
				date.setSeconds((date.getSeconds()+5+60)%60);
				
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
				return;
			}

			//   
			if (/cell-disabled/.test(this.className)) {return;}

			// DATE VIEW:        
			if (/cell-next-month/.test(this.className)) {
				
				var $top = sf.$top,day = +this.className.match(/\d{1,2}/);

				var date = sf.value,year = date.getFullYear(),month = date.getMonth();

				//           ,     1
				date.setDate(1);
				
				date.setMonth(month + 1);
				date.setDate(day);

				sf.$dateView && sf.draw(date,"date");
				
				sf.$monthView && sf.draw(date,"month");

				sf.trigger('datepick');

				return;
			}

			// DATE VIEW:       
			if (/cell-prev-month/.test(this.className)) {
				
				var $top = sf.$top,day = +this.className.match(/\d{1,2}/);

				var date = sf.value,year = date.getFullYear(),month = date.getMonth();

				//           ,     1
				date.setDate(1);
				
				date.setMonth(month - 1);
				date.setDate(day);

				sf.$dateView && sf.draw(date,"date");
				
				sf.$monthView && sf.draw(date,"month");

				sf.trigger('datepick');

				return;
			}

			// DATE VIEW:      
			if (/cell-date/.test(this.className)) {
				
				var date=sf.value,day = +this.className.match(/\d{1,2}/);

				if (day !== date.getDate()) {
					
					var $cell = $(this);
					
					date.setDate(day);

					//       
					$cell.parent().parent().find(".cell-date.cell-selected").removeClass("cell-selected");

					$cell.addClass("cell-selected");
				
				}

				sf.trigger('datepick');

				return;
			}

			// MONTH View:    
			if (/cell-month/.test(this.className)) {
				
				var date = sf.value,month = +this.className.match(/\d{1,2}/);

				if (month !== date.getMonth()+1) {

					var $cell = $(this) , $top=sf.$top;
					
					date.setMonth(month - 1);

					$top.find("td.cell-selected-month").html(sf.textMonth(month));

					//       
					$cell.parent().parent().find(".cell-month.cell-selected").removeClass("cell-selected");
					
					$cell.addClass("cell-selected");

					sf.$dateView && sf.draw(date, "date");

				}

				sf.trigger('monthpick');
				
				return;
			}

			// MONTH VIEW:     
			if (/cell-year/.test(this.className)) {
				
				var date = self.value,year = +this.className.match(/\d{4}/);

				if (year !== date.getFullYear()) {

					var $top=sf.$top , $cell=$(this);
					
					date.setFullYear(year);

					$top.find("td.cell-selected-year").html(sf.textYear(year));
					
					//       
					$cell.parent().parent().find(".cell-year.cell-selected").removeClass("cell-selected");
					
					$cell.addClass("cell-selected");

					sf.$dateView && sf.draw(date, "date");

				}
				
				sf.trigger('yearpick');
				
				return;
			}

			// MONTH VIEW:    10   
			if (/cell-next-10/.test(this.className)) {
				
				var year = +sf.$monthView.find("> table > tbody > tr:eq(0) > td:eq(3)")[0].className.match(/\d{4}/);
				
				var date = new Date(+self.value);
				
				date.setFullYear(year + 10);
				
				sf.draw(date, "month");

				return;
			}

			// MONTH VIEW:    10   
			if (/cell-prev-10/.test(this.className)) {
				
				var year = +sf.$monthView.find("> table > tbody > tr:eq(0) > td:eq(3)")[0].className.match(/\d{4}/);
				
				var date = new Date(+self.value);
				
				date.setFullYear(year - 10);
				
				sf.draw(date, "month");

				return;
			}

			// TOP VIEW:        
			if (/icon-next-month/.test(this.className)) {
				
				var date = sf.value;
				
				date.setMonth(date.getMonth() + 1);

				sf.draw(date,"date");

				sf.draw(date,"month");

				sf.$timeView && sf.$timeView.css("display")!=="none" && sf.draw(date,"time");
				
				sf.trigger('monthpick');

				return;
			}

			// TOP VIEW:         
			if (/icon-prev-month/.test(this.className)) {

				var date = sf.value;
				
				date.setMonth(date.getMonth() - 1);

				sf.draw(date,"date");

				sf.draw(date,"month");
				
				sf.$timeView && sf.$timeView.css("display")!=="none" && sf.draw(date,"time");

				sf.trigger('monthpick');

				return;
			}

			// TOP VIEW:         
			if (/icon-next-year/.test(this.className)) {

				var date = sf.value;
				
				date.setYear(date.getFullYear() + 1);

				sf.draw(date,"date");

				sf.draw(date,"month");

				sf.$timeView && sf.$timeView.css("display")!=="none" && sf.draw(date,"time");
				
				sf.trigger('yearpick');

				return;
			}

			// TOP VIEW:        
			if (/icon-prev-year/.test(this.className)) {

				var date = sf.value;
				
				date.setYear(date.getFullYear() - 1);

				sf.draw(date,"date");

				sf.draw(date,"month");
				
				sf.$timeView && sf.$timeView.css("display")!=="none" && sf.draw(date,"time");
				
				sf.trigger('yearpick');
				
				return;
			}

			// TOP VIEW:         、    
			if (/cell-selected-year/.test(this.className) || /cell-selected-month/.test(this.className)) {

				if(sf.$timeView && sf.$timeView.css("display")!=='none'){
					
					sf.$timeView.hide();
					
					sf.$dateView && sf.$dateView.show();
					
					sf.$monthView && sf.$monthView.hide();
				
				}else{

					if(sf.$dateView){
						sf.$dateView.css("display")==="none" ? sf.$dateView.show() && sf.$monthView && sf.$monthView.hide() : sf.$dateView.hide() && sf.$monthView && sf.$monthView.show();
					} 

				}
				
				return;
			}
			
			// BOTTON VIEW:        
			if(/icon-clock/.test(this.className)){
				
				var show=sf.$timeView.css("display")==="none";
	
				sf.$monthView && sf.$monthView.hide();
				
				sf.$dateView && sf.$dateView[show ? "hide" : "show"]();

				show && sf.draw(sf.value,"time");
				
				sf.$timeView.toggle();
				
				return;
			}
			
			// BOTTOM VIEW:       
			if(/btn-today/.test(this.className)){
				
				sf.value=new Date();
				
				sf.redraw();
				
				sf.trigger("datepick");
				
				return;
				
			}
			
			// BOTTOM VIEW:       
			if(/btn-clear/.test(this.className)){
				
				sf.trigger("clear");
				
				return;				
			}
			
			// BOTTOM VIEW:       
			if(/btn-ok/.test(this.className)){
				
				sf.trigger("datepick");
				
				return;
			}
			
		}).on("mousewheel.datepicker",function(e){//     

			var sf=self,date=sf.value,cls=e.target.className;
			
			if(/cell-hour/.test(cls)){
				
				date.setHours((date.getHours()-e.deltaY+24)%24);
				
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
			}
			
			if(/cell-minute/.test(cls)){
				
				date.setMinutes((date.getMinutes()-e.deltaY+60)%60);
				
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
			}
			
			if(/cell-second/.test(cls)){
				
				date.setSeconds((date.getSeconds()-e.deltaY+60)%60);
				
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
			}

			return false;
		});
	};
	
	$.datepicker.prototype.textMonth=function(month){return $.i18n.months[+month - 1];};
	
	$.datepicker.prototype.textYear=function(year){return year;};

	//       
	$.datepicker.prototype.redraw = function(date) {
		
		this.value = date || this.value;

		this.$dateView && this.draw(this.value, 'date');
		
		this.$monthView && this.draw(this.value, 'month');
		
		this.$timeView && this.draw(this.value, 'time');
		
		return this;
	};

	//     
	$.datepicker.prototype.draw = function(date, type) {

		var $view = this["$"+type+"View"];
		
		if (!$view) {return this;}

		$view = $view.find(" > table > tbody");
		
		//     
		var current_date=new Date(),cyear=current_date.getFullYear(),cmonth=current_date.getMonth(),cday=current_date.getDate(),chour=current_date.getHours(),cminute=current_date.getMinutes(),csecond=current_date.getSeconds(),cmill=current_date.getMilliseconds();
		
		//     
		var syear = this.value.getFullYear(), smonth = this.value.getMonth() + 1, sday = this.value.getDate(),shour=this.value.getHours(),sminute=this.value.getMinutes(),ssecond=this.value.getSeconds(),smill=this.value.getMilliseconds();
		
		this.$top && this.$top.find("td.cell-selected-year").html(this.textYear(syear));
			
		this.$top && this.$top.find("td.cell-selected-month").html(this.textMonth(smonth));
		
		//     
		var year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(),hour=date.getHours(),minute=date.getMinutes(),second=date.getSeconds(),mill=date.getMilliseconds();
		
		//       
		var real_date = new Date(year, month - 1, day,hour,minute,mill), real_year = year, real_month = month, real_day = day,real_hour=hour,real_minute=minute,real_second=second,real_mill=mill;

		var y = m = d = 0,fmt;

		var count = 0, html = [];

		//  0  
		var rpad = function(value) {return value > 9 ? value : "0" + value;};

		/** ---------------------------Draw Date View--------------------------- **/
		if (type == 'date') {
				
			fmt=this.getFormat("date");
			
			var selected_str=this.value.formatDate(fmt);
			
			var current_str=current_date.formatDate(fmt);

			var

			//       
			days_in_month = new Date(year, month, 0).getDate(),

			// get the selected month's starting day (from 0 to 6)
			first_day = new Date(year, month - 1, 1).getDay(),

			//        
			days_in_previous_month = new Date(year, month - 1, 0).getDate(),

			//        
			days_from_previous_month = first_day - this.firstDayOfWeek;

			// the final value of how many days are there to be shown from the previous month
			days_from_previous_month = days_from_previous_month < 0 ? 7 + days_from_previous_month
					: days_from_previous_month;

			//    
			if (this.showWeek) {
				
				html[count++] = '<tr  class="row-week"><th>'+$.i18n.week+'</th>';
				
				for ( var i = 0; i < 7; i++) 
					html[count++] = '<th>'+$.i18n.days[(this.firstDayOfWeek + i) % 7]+'</th>';
				
				html[count++] = '</tr>';
				
			}
			
			html[count++] = '<tr>';

			// 42   
			for (i = 0; i < 42; i++) {

				//   7 
				if (i > 0 && i % 7 === 0) {html[count++] = '</tr><tr>';}

				//ISO 8601    
				if (this.showWeek && i % 7 === 0)
					html[count++] = '<td class="cell-week">'+rpad(new Date(year, month - 1, (i- days_from_previous_month + 1)).getWeek(), 2)+'</td>';

				// the number of the day in month
				var day = (i - days_from_previous_month + 1);
				
				real_date = new Date(year, month - 1, day,real_hour,real_minute,real_second,real_mill);

				if (i < days_from_previous_month) {

					//         
					if (!this.showOtherMonth) {html[count++] = '<td class="cell cell-date cell-disabled">&nbsp;</td>';continue;}

					//'<td class="cell cell-{value} cell-date{prev}{next}{selected}{disabled}">{value}</td>'
					html[count++]='<td class="cell cell-';
					html[count++]=rpad(days_in_previous_month- days_from_previous_month + i + 1, 2);
					html[count++]=' cell-date cell-prev-month';
					html[count++]=!this.isLegal(real_date,'date') ? ' cell-disabled" >' : '" >';
					html[count++]=rpad(days_in_previous_month- days_from_previous_month + i + 1, 2);
					html[count++]='</td>';

					continue;
				} 
				
				if (day > days_in_month) {

					//         
					if (!this.showOtherMonth) {html[count++] = '<td class="cell cell-date cell-disabled">&nbsp;</td>';continue;}

					//'<td class="cell cell-{value} cell-date{prev}{next}{selected}{disabled}">{value}</td>'
					html[count++]='<td class="cell cell-';
					html[count++]=rpad(day - days_in_month, 2);
					html[count++]=' cell-date cell-next-month';
					html[count++]=!this.isLegal(real_date,'date') ? ' cell-disabled" >' : '" >';
					html[count++]=rpad(day - days_in_month, 2);
					html[count++]='</td>';

					continue;
					
				} 

				var real_str=real_date.formatDate(fmt);
				
				//'<td class="cell cell-{value} cell-date{prev}{next}{selected}{disabled}">{value}</td>'
				html[count++]='<td class="cell cell-';
				html[count++]=rpad(day, 2);
				html[count++]=' cell-date';
				html[count++]= current_str==real_str ? ' cell-current' : '';
				html[count++]= real_str==selected_str ? ' cell-selected' : '';
				html[count++]=!this.isLegal(real_date,'date') ? ' cell-disabled" >' : '" >';
				html[count++]=rpad(day, 2);
				html[count++]='</td>';
					
			}

			html[count++] = '</tr>';
			
			$view.html(html.join(""));
			
			return this;
		}

		/** ---------------------------Draw Month View--------------------------- **/
		if (type == 'month') {

			var mod=0;
			
			for ( var i = 0; i < 22; i++) {
				
				mod = i % 4;
				
				mod === 0 ? html[count++] = "<tr>" : false;

				tpl = '<td class="cell cell-{type} cell-{value}{selected}{disabled}" >{text}</td>';

				/** month **/
				if (mod == 0 || mod == 1) {
								
					fmt=this.getFormat("month");
			
					real_date.setFullYear(year);

					m = mod === 0 ? i / 4 + 1 : (i - 1) / 4 + 7;
					
					real_date.setMonth(m - 1);
					
					//'<td class="cell cell-{type} cell-{value}{current}{selected}{disabled}" >{text}</td>';
					html[count++]='<td class="cell cell-month cell-'+rpad(m, 2);
	
					real_date.formatDate(fmt) == current_date.formatDate(fmt) ? html[count++]=' cell-current' : false;
					real_date.formatDate(fmt) == this.value.formatDate(fmt) ? html[count++]=' cell-selected' : false;
	
					html[count++]=!this.isLegal(real_date,"month") ? ' cell-disabled" >' : '" >';
					
					html[count++]=this.textMonth(m);
					html[count++]='</td>';


				} else {
					
					/** year **/
					
					fmt=this.getFormat("year");

					y = i % 2 == 0 ? year - (5 - Math.floor(i / 4)) : year
							+ Math.floor(i / 4);
					
					real_date.setFullYear(y);
					
					//'<td class="cell cell-{type} cell-{value}{current}{selected}{disabled}" >{text}</td>';
					html[count++]='<td class="cell cell-year cell-'+y;
	
					real_date.formatDate(fmt) == current_date.formatDate(fmt) ? html[count++]=' cell-current' : false;
					real_date.formatDate(fmt) == this.value.formatDate(fmt) ? html[count++]=' cell-selected' : false;
	
					html[count++]=!this.isLegal(real_date,"year") ? ' cell-disabled" >' : '" >';
					
					html[count++]=this.textYear(y);
					html[count++]='</td>';
					
				}

				mod === 3 ? html[count++] = "</tr>" : false;

			}

			html[count++] = '<td class="cell cell-prev-10">←</td>';
			html[count++] = '<td class="cell cell-next-10">→</td>';
			html[count++] = "</tr>";

			$view.html(html.join(""));
	
			return this;
		}

		if(type === 'time'){
	
			var allowSecond = this.type==='datetime' || this.type==='time';
			
			var fHour=(real_hour-2+24)%24,fMinute=(real_minute-2+60)%60,fSecond=(real_second-2+60)%60;
			
			html[count++]='<tr><td><span class="icon-time icon-prev-hour"></span></td><td><span class="icon-time icon-prev-minute"></span></td>';
			
			allowSecond ? html[count++]='<td><span class="icon-time icon-prev-second"></span></td>' : false;
			
			html[count++]='</tr>';
			
			for(var i=0;i<5;i++){
				
				html[count++]='<tr class="'+( i==2 ? "row-time" : "")+'">';
				
				// HOUR
				html[count++]='<td class="cell cell-hour cell-';
				
				html[count++]=(fHour+i)%24;
				
				real_date.setHours((fHour+i)%24);
				html[count++]=!this.isLegal(real_date,"datehour") ? ' cell-disabled" >' : '" >';
				
				html[count++]=rpad((fHour+i)%24,2);
				
				i==2 ? html[count++]='<i class="icon-hour"></i>' : false;
				
				html[count++]='</td>';
				
				// MINUTE
				html[count++]='<td class="cell cell-minute cell-';
				
				html[count++]=(fMinute+i)%60;
				
				real_date.setHours(real_hour);
				real_date.setMinutes((fMinute+i)%60);
				html[count++]=!this.isLegal(real_date,"dateminute") ? ' cell-disabled" >' : '" >';
				
				html[count++]=rpad((fMinute+i)%60,2);
				
				i==2 ? html[count++]='<i class="icon-minute"></i>' : false;
				
				html[count++]='</td>';
				
				// SECOND
				if(allowSecond){
					
					html[count++]='<td class="cell cell-second cell-';
					
					html[count++]=(fSecond+i)%60;
					
					real_date.setHours(real_hour);
					real_date.setMinutes(real_minute);
					real_date.setSeconds((fSecond+i)%60);
					html[count++]=!this.isLegal(real_date,"datetime") ? ' cell-disabled" >' : '" >';
					
					html[count++]=rpad((fSecond+i)%60,2);
				
					i==2 ? html[count++]='<i class="icon-second"></i>' : false;
				
					html[count++]='</td>';
				
				}
			
				html[count++]='</tr>';
				
			}
			
			html[count++]='<tr><td><span class="icon-time icon-next-hour"></span></td><td><span class="icon-time icon-next-minute"></span></td>';
			
			allowSecond ? html[count++]='<td><span class="icon-time icon-next-second"></span></td>' : false;
			
			html[count++]='</tr>';
			
			$view.html(html.join(""));
			
			return this;
		}
		
		return this;

	};

	//      
	$.datepicker.prototype.setMaxDate=function(maxDate,ignoreRedraw){

		var format=this.getFormat();
		
		this.maxDate = maxDate ? (Date.isDate(maxDate) ? moment(maxDate.formatDate(format),format).toDate() : moment(maxDate,format).toDate()) : false ;
		
		!!ignoreRedraw && this.redraw();
		
		return this;
	};
	
	//      
	$.datepicker.prototype.setMinDate=function(minDate,ignoreRedraw){

		var format=this.getFormat();
	
		this.minDate = minDate ? (Date.isDate(minDate) ? moment(minDate.formatDate(format),format).toDate() : moment(minDate,format).toDate()) : false ;

		!!ignoreRedraw && this.redraw();

		return this;
	};
	
	//     
	$.datepicker.prototype.setDisableDays=function(disableDays,ignoreRedraw){
		
		this.disableDays=disableDays;
	
		!!ignoreRedraw && this.redraw();

		return this;
	};
	
	//     
	$.datepicker.prototype.setDisableDates=function(disableDates,ignoreRedraw){
		
		this.disableDates=disableDates;
	
		!!ignoreRedraw && this.redraw();

		return this;
	};	
	
	$.datepicker.prototype.getFormat=function(type){
		
		type= type || this.type;
		
		var formaters={
			datetime:'YYYY-MM-DD HH:mm:ss',
			dateminute:'YYYY-MM-DD HH:mm',
			datehour:'YYYY-MM-DD HH',
		  	date:'YYYY-MM-DD',
		  	month:'YYYY-MM',
		  	year:'YYYY',
		  	time:'HH:mm:ss',
		  	minute:'HH:mm',
		  	hour:'HH'
		};
		
		return formaters[type];

	};
	
	// YYYY-MM-DD hh:mm:ss
	$.datepicker.prototype.isLegal = function(date, type) {
		
		var l = 0,format=this.getFormat(),fmt=this.getFormat(type);
		
		//    
		if (this.maxDate){
			var f=Date.parseDate(this.maxDate.formatDate(fmt),fmt),t=Date.parseDate(date.formatDate(fmt),fmt);
			if(f.getTime() < t.getTime()) {return false;}
		} 

		//    
		if (this.minDate){
			var f=Date.parseDate(this.minDate.formatDate(fmt),fmt),t=Date.parseDate(date.formatDate(fmt),fmt);
			if(f.getTime() > t.getTime()) {return false;}
		}

		//     
		if (type === 'date' && (l=this.disableDays && this.disableDays.length || 0)) {
			var day=date.getDay();
			while (l--) 
				if(day == this.disableDays[l]) 
					return false;

		}
		
		//     
		if(l = this.disableDates && this.disableDates.length || 0){

			for(var i=0,l=format.length - fmt.length;i<l;i++)
			fmt+=".";

			var date_str=date.formatDate(fmt);
		
			while (l--) 
				if (new RegExp(this.disableDates[l]).test(date_str))
					return false;
		}

		return true;
	};

	$.datepicker.prototype.destroy=function(){
		
		this.off();
		
		this.$element.off(".datepicker").removeData().remove();

		return this;		
	};
	
	$.datepicker.prototype.trigger = function(event) {
		
		var date = this.isLegal(this.value) ? this.value : null;
		
		var params = [ this, date ];
		for ( var i = 1, l = arguments.length; i < l; i++) {
			params[i+1] = arguments[i];
		}

		var type=event.toUpperCase();
		event=new jQuery.Event(type, type+"."+this.widget );
		this.$element.triggerHandler(event, params);
	
		return event;
	};

	$.datepicker.prototype.on = function(event, handler) {
		this.$element.on(event.toUpperCase() + "." + this.widget, handler);
		return this;
	};
	
	$.datepicker.prototype.one = function(event, handler) {
		this.$element.one(event.toUpperCase() + "." + this.widget, handler);
		return this;
	};

	$.datepicker.prototype.off = function(event, handler) {
		this.$element.off(event.toUpperCase() + "." + this.widget, handler);
		return this;
	};

	$.datepicker.prototype.widget = 'datepicker';

	/**
	 * datepicker plugin
	 */
	$.fn.datepicker = function(options) {
	
		var f=null,fields=[];

		for(var i=0,l=this.length;i<l;i++){
				f=$.data(this[i], "widget");
				!f ? (f=new $.datepicker(this.eq(i), $.extend( {}, $.fn.datepicker.defaults, options)),$.data(this[i], "widget", f)) : false;
				fields[i]=f;
		}

		return l===1 ? fields[0] : fields;
	
	};

	/**
	 * Default options for autocomplete plugin
	 */
	$.fn.datepicker.defaults = {
		/** class on input **/
		cls : '',

		width : 200,

		height : false,

		// datetime、dateminute、date、month、time、minute
		type : 'date',

		disableDays : [],

		disableDates : [],

		minDate : false,

		minDate : false,

		showWeek : true,

		showOtherMonth : true,
		
		//     
		showToday:false,
		
		// OK  
		showOK:false,
		
		//   
		showClear:false,

		firstDayOfWeek : 0,

		value : false
	};

	////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////
	///////////////////////////////////////////////////////
	///////////////////////////////////////////////////////
	
	$.datefield = function($element, options) {
		
		var self = this,input = $element[0],value=options.value || input.value,name=options.name || input.name;
		this.$element = (options.cls ? $element : $element.addClass(options.cls)).removeAttr("name");
		input.autocomplete = 'off';;
		input.value='';
		
		//     
		this._read_only=false;
		!!options.readOnly || $element.prop("readOnly") ? this.readOnly(true) : false;
		
		//    
		this.$hidden = $("<input type='hidden' ignoreElement='true' name='"+ name + "' value='' />").appendTo(input.parentNode);
		
		//       
		this.format = options.format || $.datepicker.prototype.getFormat(options.type);
		
		//          
		this.valueFormat = options.valueFormat || this.format;

		this.$list = $("<div class='c-list date-picker' style='display:none;'></div>").appendTo(document.body);				
		
		//      placeholder
		var ph = options.placeholder;
		if (ph) {
			_support_placeholder ? $element.attr("placeholder", ph)
					: this.placeholder = ph;
		} else {
			if (!_support_placeholder) {
				ph = $element.attr("placeholder");
				if (ph) {
					this.placeholder = ph;
					$element.removeAttr("placeholder");
				}
			}
		}
	
		//       
		value= Date.parseDate(value,this.valueFormat) || Date.parseDate(value, this.format) || Date.parseDate(value);
		
		//     
		var opts = {
			width : 200,
			value : value,
			type : options.type,
			maxDate:options.maxDate,
			minDate:options.minDate,
			showOK:options.showOK,
			showToday:options.showToday,
			showClear:options.showClear,
			disableDays : options.disableDays,
			disableDate : options.disableDates
		};

		var _pick_date = function(event, picker, date,keepVisible) {

			var sf=self;
			
			var text = date && date.formatDate(sf.format) || "";
			
			var value = date && date.formatDate(sf.valueFormat) || "";
			
			sf.$element[0].value = text;
			
			sf.$hidden[0].value = value;
			
			//     ,        
			sf._selected_=value;
			
			sf.selectRange(0, text.length);
		
			!keepVisible && (event.type == 'DATEPICK' || event.type == 'TIMEPICK') ? sf.hide() : false;
		
			sf.trigger("select",value);
			
		};

		this.datepicker = this.$list.datepicker(opts).on('datepick', _pick_date).on('monthpick', _pick_date).on('yearpick',_pick_date).on("timepick",_pick_date).on("clear",function(e,p){
			
			//    
			_pick_date({type:'DATEPICK'},p,null,false);
			
		});

		this.reset(value,true);

		$element.focus(function() {
			
			var sf=self,$this=$(this);
			
			//   
			if(sf.isReadOnly()){return true;}

			//    
			if($this.hasClass("focus")){return true;}

			$this.removeClass("placeholder").addClass("focus");

			//        placeholder   
			var ph=sf.placeholder;
			ph && this.value === ph ? this.value = '' : sf.selectRange(0, this.value.length);

			//     
			sf.trigger('focus');
			
			//   DOM   
			if(sf.isActive()){return true;}
			
			//     DOOM
			sf.show();

		}).blur(function() {

			var sf=self;
			
			// IE7&&8 BUG  
			if (sf._ignore_blur_) {this.focus();sf.selectRange(0, this.value.length);sf._ignore_blur_ = false;return false;}
			
			if(sf.isReadOnly()){return true;}

			$(this).removeClass("focus");

			var value=this.value,ph=sf.placeholder;
	
			//               ,           
			value = ph && value == ph ?  '' : value.replace(/(^\s+)|(\s+$)/g,"");
			value = value == '' ? null : Date.parseDate(value,sf.valueFormat) || Date.parseDate(value) || Date.parseDate(sf._selected_,sf.valueFormat);
	
			sf.value(value);
			
			//     
			sf.hide();

			//   blur  
			sf.trigger("blur");

			//   
			sf.validate();

		}).click(function() {
					
			!self.isReadOnly() && !self.isActive() && self.show();
					
		}).keyup(function(e){
			
			var sf=self;
			
			if(sf.isReadOnly()){return true;}
			
			switch (e.keyCode) {
			
				case 40: // down
					
					!sf.isActive() && sf.show();

					return false;
					
				case 13: // enter
				
					sf.isActive() && sf.datepicker.trigger("datepick");

					return false;

				case 27: // escape
					
					sf.isActive() && sf.hide();
					
					return false;

				default:

					return true;
				}
		});

		//          ,     
		var celleditor=options.celleditor;
		
		this.$list.mousedown(function(e) {
			
			e.preventDefault();

			// @IE6/7/8 even prevent default behavior , blur event triggered also
			self._ignore_blur_ = $.browser.msie && (+$.browser.version) < 9;
			
			//          ,     
			return celleditor ? false : true;
		});
	}

	//           
	$.datefield.prototype.isActive = function() {return this.$list[0].style.display === 'block';};

	//         
	$.datefield.prototype.hide = function() {
		
		if(this.isReadOnly()){return this;}
		
		if(!this.isActive()){return this;}
		
		this.$list[0].style.display = 'none';
		
		//     
		this.trigger("deactive");
		
		return this;
	}

	//        
	$.datefield.prototype.show = function() {
	
		if(this.isReadOnly()){return this;}
		
		var isActive=this.isActive();
		
		this.$list[0].style.display='block';
		
		// jquery ui position plugin
		if ($.ui && $.position && $.fn.position) {

			this.$list.position( {
				my : "left top",
				at : "left bottom",
				collision : "flip",
				of : this.$element
			});
			
		} else {

			var bottom = 0, offset = this.$element.offset();
			
			this.$list.css( {
				top : (offset.top + this.$element[0].offsetHeight) + 'px',
				left : offset.left + 'px'
			});

		}
		
		//     
		!isActive && this.trigger("active");

		return this;

	}

	// MY GOD DOM
	$.datefield.prototype.selectRange = function(start, end) {
		
		var input = this.$element[0];
		
		if (input.setSelectionRange) {
		
			input.focus();
			
			input.setSelectionRange(start, end);
		
		} else if (input.createTextRange) {
			
			var range = input.createTextRange();
			
			range.collapse(true);
			
			range.moveEnd('character', end);
			
			range.moveStart('character', start);
		
			range.select();
		
		}
		
		return this;
	};
	
	//     
	$.datefield.prototype.validate=function(){
		
		var state=$.validate ? $.validate(this.$element) : true;
		
		return state;
	};
	
	//      ,      ,           
	$.datefield.prototype.maxDate=function(maxDate,ignoreRedraw){

		this.datepicker.setMaxDate(maxDate,ignoreRedraw);
		
		return this;
	};
	
	//      ,      ,           
	$.datefield.prototype.minDate=function(minDate,ignoreRedraw){

		this.datepicker.setMinDate(minDate,ignoreRedraw);

		return this;
	};
	
	//     , :disableDates:['5$']       5      
	$.datefield.prototype.disableDays=function(disableDays,ignoreRedraw){
		
		this.datepicker.setDisableDays(disableDays,ignoreRedraw);

		return this;
	};
	
	//     , :disableDates:[0,4]       、  
	$.datefield.prototype.disableDates=function(disableDates,ignoreRedraw){
		
		this.datepicker.setDisableDates(disableDates,ignoreRedraw);

		return this;
	};
	
	//   
	$.datefield.prototype.isReadOnly=function(){return this._read_only===true;};

	//     
	$.datefield.prototype.readOnly = function(readOnly) {
		
		readOnly=!!readOnly;
		
		this._read_only=readOnly;
	
		this.$element[readOnly ? "addClass" : "removeClass"]("readOnly").prop("readOnly",readOnly);
		
		return this;
	};

	//    
	$.datefield.prototype.value = function(value, ignoreRedraw) {
		
		//    
		if (value === undefined) {return this.$hidden[0].value;}

		var oldValue=this.value();
		
		//     
		var date = Date.parseDate(value,this.valueFormat) ||  Date.parseDate(value);

		//      
		date = date && this.datepicker.isLegal(date) ? date : null;

		var newValue=date && date.formatDate(this.valueFormat) || '';
		
		//      
		this._selected_=newValue;
		
		//       
		this.$hidden[0].value = newValue;

		//        
		var text = date && date.formatDate(this.format) || '';
		
		this.$element[0].value=text;

		// placeholder    
		var ph=this.placeholder;
		ph && this.$element[(text ? "remove" : "add") + "Class"]("placeholder");
		ph && text==="" ? this.$element[0].value=ph : false; 

		//     
		oldValue!=newValue && this.trigger("change",newValue,oldValue);
	
		//     
		oldValue!=newValue && this.trigger("select",newValue);
		
		//       
		date && !ignoreRedraw && oldValue!=newValue && this.datepicker.redraw(date);

		return this;
	};

	$.datefield.prototype.reset = function(value,ignoreRedraw) {

		this.value(value,ignoreRedraw);

		this._default_value = this.value();
		
		return this;
	}

	$.datefield.prototype.destroy=function(keep){
		
		this.picker.destroy && this.picker.destroy();
		
		this.$list.off().remove();
		
		this.$element.off(".datefield").removeData();

		if(!!keep){
			
			this.$element.attr("name",this.$hidden[0].name);
			this.$hidden.remove();
			
		}else{
			this.$hidden.remove();
			this.$element.remove();
		}

	};
		
	$.datefield.prototype.trigger = function(event) {
		var params = [ this];
		for ( var i = 1, l = arguments.length; i < l; i++) {
			params[i] = arguments[i];
		}
		
		var type=event.toUpperCase();
		event=new jQuery.Event(type, type+"."+this.widget );
		this.$element.triggerHandler(event, params);
	
		return event;
	};

	$.datefield.prototype.destroy=function(keep){
		
		this.datepicker && this.datepicker.destroy && this.datepicker.destroy();
		
		this.$list.off(".datefield").remove();
		
		this.$element.off(".datefield").removeData();

		this.off();
		
		var name=this.$hidden[0].name;
		
		this.$hidden.remove();
		
		!!keep ? this.$element[0].name=name : this.$element.remove();
		
	};
		
	$.datefield.prototype.on = function(event, handler) {
		this.$element.on(event.toUpperCase() + "." + this.widget, handler);
		return this;
	};
	
	$.datefield.prototype.one = function(event, handler) {
		this.$element.one(event.toUpperCase() + "." + this.widget, handler);
		return this;
	};

	$.datefield.prototype.off = function(event, handler) {
		this.$element.off(((event && event.toUpperCase()) || '') + "." + this.widget, handler);
		return this;
	};

	$.datefield.prototype.widget = 'datefield';

	$.fn.datefield = function(options) {
		
		var f=null,fields=[];

		for(var i=0,l=this.length;i<l;i++){
				f=$.data(this[i], "widget");
				!f ? (f=new $.datefield(this.eq(i), $.extend( {}, $.fn.datefield.defaults, options)),$.data(this[i], "widget", f)) : false;
				fields[i]=f;
		}

		return l===1 ? fields[0] : fields;
	
	};

	$.fn.datefield.defaults = {
		
		//   class
		cls : '',

		//         
		name : '',

		//    
		value : false,

		//       :datetime、dateminute、datehour、date、month、time、minute
		type:'date',
		
		//       
		format : false,//'YYYY-MM-DD',

		//        
		valueFormat : false,// 'YYYY-MM-DD',

		//      
		maxDate : false,

		//      
		minDate : false,

		//     
		showToday:false,
		
		// OK  
		showOK:false,
		
		//     
		showClear:false,
		
		//     
		disableDays : false,

		//        
		disableDates : false,

		//     
		placeholder : '',
		
		//           ,    
		celleditor:false

	};

})(jQuery);

좋은 웹페이지 즐겨찾기