您的位置:首页 > Web前端 > JQuery

自定义jquery ui日历

2015-07-19 18:47 567 查看
自定义的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英文



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: