指引网

当前位置: 主页 > 网页制作 > jQuery >

自定义jquery ui台历

来源:网络 作者:佚名 点击: 时间:2017-06-21 07:19
[摘要] 自定义jquery ui日历自定义的jquery ui组件开发的日历控件,和系统配置支持变更语言,变更时间格式,切换时区 $(function() { jQuery.widget("xway.Calendar", { _div : null,
自定义jquery ui日历

自定义的jquery ui组件开发的日历控件,和系统配置支持变更语言,变更时间格式,切换时区

$(function() {
	jQuery.widget("xway.Calendar", {
		
		_div : null,
		
		hide : function() {
			jQuery(document).off("mouseup");
			this._div.fadeOut();
		},
		
		pickup : function(value) {
			this.hide();
			this.element.val(value);
		},
		
		load : function(value) {
			if (typeof(value) == "undefined" || value == null) value = "";
			this._div.load("Calendar.do?d=" + value);
		},
		
		options: {
			value : null
		},
		
		_create: function() {
			this._div = jQuery("<div></div>");
			this._div.insertAfter(this.element);
			this._div.css("display", "none");
			this._div.css("position", "absolute");
			this._div.css("z-index", "999");
			this._div.css("background", "#eeeeee");
			this._div.css("border", "1px groove  ");
			this._div.css("overflow" , "hidden");
			this._div.css("left", this.element.position().left + this.element.outerWidth());
			this._div.css("top", this.element.position().top);
			this._div.css("width", "260");
			this._div.css("height", "290");
			
		},
		
		_init: function() {
			this._div.data("calendar", this);
			this.load(this.element.val());
			this._div.fadeIn();
			
			jQuery(document).on("mouseup", null, this, function(event) {
				var event = event || window.event;
				var obj = event.data;
				var elm = event.data._div;
				if (!elm.is(event.target)  && elm.has(event.target).length == 0)  {
					obj.hide();
				}
	
			});
		},
		
		_destroy: function() {
			alert(1);
			this._super();
			this.element.next().remove();
		},	
	
		_setOption: function( key, value ) {
			 if (key == "input" && value == null) {
				 return ;
			 }
	        this._super( key, value );
	     }
	
	});
})

显示如下图:

左边是 mm/dd/yyyy中文,右边是yyyy-mm-dd英文

  

版权声明:本文为博主原创文章,未经博主允许不得转载。

------分隔线----------------------------