自定义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英文

  

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值