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