给 jQueryUI datepicker 添加 Clear Button

阅读更多

整理中

var datePickerUtils = {
	_optsDefault : {
			showOn: 'both', 
			buttonImage: 'resources/images/pixel.gif', 
			buttonText:'Calendar', 
			buttonImageOnly: true,
			changeMonth: true,
			changeYear: true,
			minDate: '-50Y',
			maxDate:'+30y', 
			yearRange:'-50:+50',
			dateFormat:'M-dd-yy'
	},
	
	_addClearBtn : function( $el ){
		if( !$el.hasClass('hasdatepicker-clear') ){
//			window.console && console.log("NOT hasClass hasdatepicker-clear...........");
			var btn_datepicker_clear=$("");	
			$el.after(btn_datepicker_clear);
			
			btn_datepicker_clear.on("click", function(){
					
				if ($(this).hasClass('disabled')){
					return false;
				}
				
				var the_dp = $(this).siblings(".jq-datepicker, select11");
				the_dp.datepicker( "setDate" , null );
				
//				if ( the_dp.valid){
//		      		the_dp.valid();
//				}
	      
//				$(this).siblings(".jq-datepicker, select11").val(null);	
//				
//				$(this).siblings(".jq-datepicker, select").change();
//				$(this).siblings(".jq-datepicker, select").trigger("change");
				//$(this).closest("ul.content").find("input[type='radio']").attr("checked",false);									  
			});
			$el.addClass('hasdatepicker-clear');
			
			
		}
		
		
	},
	init : function( seletor, p_opts ){
		var $this=$(seletor);
		if ($this.size() == 0)  return false;
		
		var optsDefault = datePickerUtils._optsDefault;
		
		var opts = $.extend( {} ,optsDefault,p_opts) ;
		
		window.console && console.log(p_opts);
		window.console && console.log(opts);
		
		$this.each(function(index) {
//			window.console && console.log("initDatePicker index..........."+index);
			var temp = $(this);
			temp.attr('readonly','readonly');	
			if (temp.hasClass("jq-datepicker")){
//				temp.datepicker( 'enable' ); 
//				return ;
			}else{
				temp.addClass("jq-datepicker");			
			}
			datePickerUtils._addClearBtn(temp);
			temp.datepicker(opts);
		});
		
//		$this.addClass("jq-datepicker");1
		
	}
	
};

使用实例：

	datePickerUtils.init($(".jq-datepicker"));