easyui1.4日期选择控件datetimebox增加整10分选择功能

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>&nbsp;:&nbsp;<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);