plugins 加入datetimebox_ten模块
plugins : ["draggable", "droppable", "resizable", "pagination", "tooltip", "linkbutton", "menu", "menubutton", "splitbutton", "progressbar", "tree", "textbox", "filebox",
"combo", "combobox", "combotree", "combogrid", "numberbox", "validatebox", "searchbox", "spinner", "numberspinner", "timespinner", "datetimespinner", "calendar",
"datebox", "datetimebox", "datetimebox_ten", "slider", "layout", "panel", "datagrid", "propertygrid", "treegrid", "tabs", "accordion", "window", "dialog", "form"]
datetimebox_ten模块代码
(function($) {
function createBox(target) {
var state = $.data(target, "datetimebox");
var opts = state.options;
$(target).datebox($.extend({}, opts, {
onShowPanel : function() {
var value = $(target).datetimebox("getValue");
setValue(target, value, true);
opts.onShowPanel.call(target);
},
formatter : $.fn.datebox.defaults.formatter,
parser : $.fn.datebox.defaults.parser
}));
$(target).removeClass("datebox-f").addClass("datetimebox-f");
$(target).datebox("calendar").calendar({
onSelect : function(date) {
opts.onSelect.call(target, date);
}
});
/*var panel = $(target).datebox("panel");
if (!state.spinner) {
var p = $("<div style=\"padding:2px\"><input style=\"width:80px\"></div>").insertAfter(panel.children("div.datebox-calendar-inner"));
state.spinner = p.children("input");
}
state.spinner.timespinner({
width : opts.spinnerWidth,
showSeconds : opts.showSeconds,
separator : opts.timeSeparator
}).unbind(".datetimebox").bind("mousedown.datetimebox", function(e) {
e.stopPropagation();
});
setValue(target, opts.value);*/
var panel = $(target).datebox("panel");
if (!state.spinner) {
var optionHour = "";
for(var i=0;i<24;i++){
var hour = "";
if(i<10){
hour += "0";
}
hour += i;
optionHour += "<option value="+hour+">"+hour+"</option>"
}
var optionMin = "";
for(var i=0;i<60;i+=10){
var min = "";
if(i<10){
min += "0";
}
min += i;
optionMin += "<option value="+min+">"+min+"</option>"
}
var p = $("<div style=\"padding:2px\"><select class='easyui-combobox' style=\"width:40px\">"+optionHour+"</select> : <select class='easyui-combobox' style=\"width:40px\">"+optionMin+"</select></div>").insertAfter(panel.children("div.datebox-calendar-inner"));
state.spinner = p;
}
/*state.spinner.timespinner({
width : opts.spinnerWidth,
showSeconds : opts.showSeconds,
separator : opts.timeSeparator
}).unbind(".datetimebox").bind("mousedown.datetimebox", function(e) {
e.stopPropagation();
});*/
setValue(target, opts.value);
};
function getCurrentDate(target) {
var c = $(target).datetimebox("calendar");
var date = c.calendar("options").current;
//alert();
var h = $(target).datetimebox("spinner").children().eq(0).val();
var m = $(target).datetimebox("spinner").children().eq(1).val();
return new Date(date.getFullYear(), date.getMonth(), date.getDate(), h, m);
/*var c = $(target).datetimebox("calendar");
var t = $(target).datetimebox("spinner");
var date = c.calendar("options").current;
return new Date(date.getFullYear(), date.getMonth(), date.getDate(), t.timespinner("getHours"), t.timespinner("getMinutes"), t.timespinner("getSeconds"));*/
};
function doQuery(target, q) {
setValue(target, q, true);
};
function doEnter(target) {
var opts = $.data(target, "datetimebox").options;
var date = getCurrentDate(target);
setValue(target, opts.formatter.call(target, date));
$(target).combo("hidePanel");
};
function setValue(target, value, remainText) {
var opts = $.data(target, "datetimebox").options;
$(target).combo("setValue", value);
if (!remainText) {
if (value) {
var date = opts.parser.call(target, value);
$(target).combo("setValue", opts.formatter.call(target, date));
$(target).combo("setText", opts.formatter.call(target, date));
} else {
$(target).combo("setText", value);
}
}
var date = opts.parser.call(target, value);
$(target).datetimebox("calendar").calendar("moveTo", date);
getTimeS(date);
function getTimeS(date) {
function formatNumber(value) {
return (value < 10 ? "0" : "") + value;
};
$(target).datetimebox("spinner").children().eq(0).val(formatNumber(date.getHours()));
//alert(date.getMinutes()/10 + "0");
$(target).datetimebox("spinner").children().eq(1).val(Math.floor(date.getMinutes()/10) + "0");
}
//$(target).datetimebox("spinner").timespinner("setValue", getTimeS(date));
/*function getTimeS(date) {
function formatNumber(value) {
return (value < 10 ? "0" : "") + value;
};
var tt = [formatNumber(date.getHours()), formatNumber(date.getMinutes())];
if (opts.showSeconds) {
tt.push(formatNumber(date.getSeconds()));
}
return tt.join($(target).datetimebox("spinner").timespinner("options").separator);
};*/
};
$.fn.datetimebox_ten = function(options, param) {
if (typeof options == "string") {
var _99d = $.fn.datetimebox_ten.methods[options];
if (_99d) {
return _99d(this, param);
} else {
return this.datebox(options, param);
}
}
options = options || {};
return this.each(function() {
var state = $.data(this, "datetimebox");
if (state) {
$.extend(state.options, options);
} else {
$.data(this, "datetimebox", {
options : $.extend({}, $.fn.datetimebox_ten.defaults, $.fn.datetimebox_ten.parseOptions(this), options)
});
}
createBox(this);
});
};
$.fn.datetimebox_ten.methods = {
options : function(jq) {
var _99f = jq.datebox("options");
return $.extend($.data(jq[0], "datetimebox").options, {
originalValue : _99f.originalValue,
disabled : _99f.disabled,
readonly : _99f.readonly
});
},
spinner : function(jq) {
return $.data(jq[0], "datetimebox").spinner;
},
setValue : function(jq, value) {
return jq.each(function() {
setValue(this, value);
});
},
reset : function(jq) {
return jq.each(function() {
var opts = $(this).datetimebox("options");
$(this).datetimebox("setValue", opts.originalValue);
});
}
};
$.fn.datetimebox_ten.parseOptions = function(target) {
var t = $(target);
return $.extend({}, $.fn.datebox.parseOptions(target), $.parser.parseOptions(target, ["timeSeparator", "spinnerWidth", {
showSeconds : "boolean"
}]));
};
$.fn.datetimebox_ten.defaults = $.extend({}, $.fn.datebox.defaults, {
spinnerWidth : "100%",
//showSeconds : true,
timeSeparator : ":",
keyHandler : {
up : function(e) {},
down : function(e) {},
left : function(e) {},
right : function(e) {},
enter : function(e) {
doEnter(this);
},
query : function(q, e) {
doQuery(this, q);
}
},
buttons : [{
text : function(_9a2) {
return $.fn.datebox.defaults.currentText;
//return $(_9a2).datetimebox("options").currentText;
},
handler : function(_9a3) {
$(_9a3).datetimebox("calendar").calendar({
year : new Date().getFullYear(),
month : new Date().getMonth() + 1,
current : new Date()
});
doEnter(_9a3);
}
}, {
text : function(_9a4) {
return $.fn.datebox.defaults.okText;
//return $(_9a4).datetimebox("options").okText;
},
handler : function(_9a5) {
doEnter(_9a5);
}
}, {
text : function(_9a6) {
return $.fn.datebox.defaults.closeText;
//return $(_9a6).datetimebox("options").closeText;
},
handler : function(_9a7) {
$(this).closest("div.combo-panel").panel("close");
}
}],
formatter : function(date) {
var h = date.getHours();
var M = date.getMinutes();
var s = date.getSeconds();
function formatNumber(value) {
return (value < 10 ? "0" : "") + value;
};
/*var _9aa = $(this).datetimebox("spinner").timespinner("options").separator;
var r = $.fn.datebox.defaults.formatter(date) + " " + formatNumber(h) + _9aa + formatNumber(M);
if ($(this).datetimebox("options").showSeconds) {
r += _9aa + formatNumber(s);
}
return r;*/
var separator = $.fn.datetimebox_ten.defaults.timeSeparator;
return $.fn.datebox.defaults.formatter(date) + " " + formatNumber(h) + separator + formatNumber(M);
},
parser : function(s) {
if ($.trim(s) == "") {
return new Date();
}
var dt = s.split(" ");
var d = $.fn.datebox.defaults.parser(dt[0]);
if (dt.length < 2) {
return d;
}
/*var splitStr = $(this).datetimebox("spinner").timespinner("options").separator;
var tt = dt[1].split(_9ab);
var hour = parseInt(tt[0], 10) || 0;
var _9ac = parseInt(tt[1], 10) || 0;
var _9ad = parseInt(tt[2], 10) || 0;
return new Date(d.getFullYear(), d.getMonth(), d.getDate(), hour, _9ac, _9ad);*/
var separator = $.fn.datetimebox_ten.defaults.timeSeparator;
var tt = dt[1].split(separator);
var h = tt[0];
var m = tt[1];
return new Date(d.getFullYear(), d.getMonth(), d.getDate(), h, m);
}
});
})(jQuery);
相关推荐
在本场景中，我们关注的是`datetimebox`组件，它是一个用于日期和时间选择的控件。根据标题和描述，我们需要对EasyUI的datetimebox进行定制，主要涉及两个核心功能：联动时间和添加“清空”按钮。 首先，联动时间是...
本知识点将详细讲解基于jQuery EasyUI改造的周选择控件，以及如何实现指定周起始星期功能。 首先，jQuery EasyUI提供了一套完整的日期选择器（datebox）和日期时间选择器（datetimebox），但它们默认并不支持直接...
easyui日期控件只选择到月份，保存记录一下。 <input id="month" class="easyui-datetimebox" name="month" data-options="required:true,formatter:myformatter,parser:myParser" 160px" />
注意：这是MAVEN项目，直接导入Eclipse 到Tomcat服务器访问sendSMS.jsp即可 介绍： 项目是...文章代码的实现，实现了easyui 进度条的功能，感觉很好玩，可以参考一下
easyui1.2.4.chm,easyui1.2.4.chm
1. **整合目标**：本文档的目标是将 Struts2.x、Spring3.x、Hibernate4.x 与 DWR、jquery2.x 和 easyUI1.3.x 进行集成，以构建一个功能齐全且高效的 Web 开发环境。 2. **jQuery 版本选择**：为了兼容性和性能考虑...
4. **测试与调试**：在不同的场景下测试修复后的功能，确保修改不影响其他验证规则，并且小数点输入能够正常工作。 `jquery.easyui.patch.js`文件的内容可能如下： ```javascript $.extend($.fn.validatebox....
jQuery EasyUI 1.5.x of insdep theme Insdep theme是基于EasyUI 1.5.x 的一款免费的美化主题包，拥有百度编辑器、cropper、... jquery.easyui.min.js及jquery.min.js都是官方原版，未进行任何修改，可以选择性使用。
jquery.easyui.min.js
jquery easyUI 1.2.4.chm帮助文档 jquery easyUI 1.2.4.chm帮助文档 jquery easyUI 1.2.4.chm帮助文档
EasyUI 的核心组件包括：布局（layout）、表格（datagrid）、对话框（dialog）、菜单（menu）、表单（form）、树形控件（tree）、下拉树（combotree）、下拉框（combobox）、按钮（button）、提示（tooltip）等。...
它扩展了 jQuery，提供了诸如数据网格、表单验证、下拉树、日期选择器等功能。例如，我们可以使用 `$.fndatagrid` 方法来操作数据网格： ```javascript $('#dg').datagrid({ url: 'get_data.json', columns: [[ ...
1. EasyUI 核心概念： - jQuery：EasyUI 基于 jQuery 构建，因此需要熟悉 jQuery 的基础操作，如选择器、事件处理、DOM 操作等。 - 组件化：EasyUI 将常见的 UI 元素封装为独立的组件，如对话框、表格、下拉框、树...
jQueryEasyUI 1.8.1.chm，英文版，来自EasyUI官网的doc
这个“easyui demo .zip”压缩包很可能是包含了一系列 EasyUI 的示例代码和资源文件，用于展示其功能和用法。通过解压并研究这些示例，我们可以深入了解 EasyUI 的核心组件、布局和交互方式。 EasyUI 提供了丰富的...
用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用...
5. **插件扩展**：Easyui社区提供了许多第三方插件，如日期选择器（datebox）、时间选择器（timespinner）、树形控件（tree）等，进一步扩展了框架的功能。 6. **易于使用**：Easyui的API简洁直观，只需少量代码就...
<input type="text" class="easyui-datetimebox" placeholder="选择日期和时间"> ``` 或者与日期范围选择器（DateRangeBox）配合，方便用户选择一个日期范围： ```html <div class="easyui-datebox" data-options=...