前言
扩展自$.fn.spinner.defaults。使用$.fn.timespinner.defaults重写默认值对象。下载该插件翻译源码
时间微调组件的创建基于微调组件。它和数字微调类似，但是显示的时间值。时间微调组件允许用户点击组件右侧的小按钮来增加或减少时间
源码
/**
* jQuery EasyUI 1.3.2
* qq：1364386878
*日期微调
*
*/
(function ($) {
//初始化timeSpinner
function init(jq) {
var options = $.data(jq, "timespinner").options;
$(jq).addClass("timespinner-f");
$(jq).spinner(options);
$(jq).unbind(".timespinner");
$(jq).bind("click.timespinner", function () {
var start = 0;
if (this.selectionStart != null) {
start = this.selectionStart;
} else {
if (this.createTextRange) {
var range = jq.createTextRange();
var s = document.selection.createRange();
s.setEndPoint("StartToStart", range);
start = s.text.length;
}
}
if (start >= 0 && start <= 2) {
options.highlight = 0;
} else {
if (start >= 3 && start <= 5) {
options.highlight = 1;
} else {
if (start >= 6 && start <= 8) {
options.highlight = 2;
}
}
}
highlight(jq);//初始选中的字段
}).bind("blur.timespinner", function () {
_setValue(jq);//设置时间微调组件的值
});
};
//初始选中的字段
function highlight(jq) {
var options = $.data(jq, "timespinner").options;
var start = 0, end = 0;
if (options.highlight == 0) {
start = 0;
end = 2;
} else {
if (options.highlight == 1) {
start = 3;
end = 5;
} else {
if (options.highlight == 2) {
start = 6;
end = 8;
}
}
}
if (jq.selectionStart != null) {
jq.setSelectionRange(start, end);
} else {
if (jq.createTextRange) {
var range = jq.createTextRange();
range.collapse();
range.moveEnd("character", end);
range.moveStart("character", start);
range.select();
}
}
$(jq).focus();
};
//解析时间
function parseTime(jq, value) {
var options = $.data(jq, "timespinner").options;
if (!value) {
return null;
}
var separators = value.split(options.separator);
for (var i = 0; i < separators.length; i++) {
if (isNaN(separators[i])) {
return null;
}
}
while (separators.length < 3) {
separators.push(0);
}
return new Date(1900, 0, 0, separators[0], separators[1], separators[2]);
};
// 设定timespinner的值
function _setValue(jq) {
var options = $.data(jq, "timespinner").options;
var val = $(jq).val();
var time = parseTime(jq, val);
if (!time) {
time = parseTime(jq, options.value);
}
if (!time) {
options.value = "";
$(jq).val("");
return;
}
var minTime = parseTime(jq, options.min);
var maxTime = parseTime(jq, options.max);
if (minTime && minTime > time) {
time = minTime;
}
if (maxTime && maxTime < time) {
time = maxTime;
}
var tt = [minTime(time.getHours()), minTime(time.getMinutes())];
if (options.showSeconds) {
tt.push(minTime(time.getSeconds()));
}
var val = tt.join(options.separator);
options.value = val;
$(jq).val(val);
function minTime(value) {
return (value < 10 ? "0" : "") + value;
};
};
//用户点击spinner按钮触发一个方法
function clickSpinner(jq, down) {
var options = $.data(jq, "timespinner").options;
var val = $(jq).val();
if (val == "") {
val = [0, 0, 0].join(options.separator);
}
var separators = val.split(options.separator);
for (var i = 0; i < separators.length; i++) {
separators[i] = parseInt(separators[i], 10);
}
if (down == true) {
separators[options.highlight] -= options.increment;
} else {
separators[options.highlight] += options.increment;
}
$(jq).val(separators.join(options.separator));
_setValue(jq);
highlight(jq);
};
//实例化函数
$.fn.timespinner = function (options, param) {
if (typeof options == "string") {
var method = $.fn.timespinner.methods[options];
if (method) {
return method(this, param);
} else {
return this.spinner(options, param);
}
}
options = options || {};
return this.each(function () {
var timespinner = $.data(this, "timespinner");
if (timespinner) {
$.extend(timespinner.options, options);
} else {
$.data(this, "timespinner", {
options: $.extend({}, $.fn.timespinner.defaults,
$.fn.timespinner.parseOptions(this), options)
});
init(this);
}
});
};
//默认方法
$.fn.timespinner.methods = {
//返回属性对象
options: function (jq) {
var options = $.data(jq[0], "timespinner").options;
return $.extend(options, {
value: jq.val(),
originalValue: jq.spinner("options").originalValue
});
},
//设置时间微调组件的值
setValue: function (jq, value) {
return jq.each(function () {
$(this).val(value);
_setValue(this);
});
},
//设置时间微调组件的值
getHours: function (jq) {
var options = $.data(jq[0], "timespinner").options;
var separators = jq.val().split(options.separator);
return parseInt(separators[0], 10);
},
//获取当前的分钟数
getMinutes: function (jq) {
var options = $.data(jq[0], "timespinner").options;
var separators = jq.val().split(options.separator);
return parseInt(separators[1], 10);
},
//获取当前的秒数
getSeconds: function (jq) {
var options = $.data(jq[0], "timespinner").options;
var separators = jq.val().split(options.separator);
return parseInt(separators[2], 10) || 0;
}
};
//解析器参数
$.fn.timespinner.parseOptions = function (target) {
return $.extend({}, $.fn.spinner.parseOptions(target),
$.parser.parseOptions(target,
["separator", { showSeconds: "boolean", highlight: "number" }]));
};
//默认属性和事件 并继承spinner
$.fn.timespinner.defaults = $.extend({},
$.fn.spinner.defaults, {
separator: ":",//定义在小时、分钟和秒之间的分隔符
showSeconds: false,//定义是否显示秒钟信息
highlight: 0,//初始选中的字段 0=小时,1=分钟.
//在用户点击微调按钮的时候调用的函数。'down'参数对应用户点击的向下按钮
spin: function (down) {
clickSpinner(this, down);
}
});
})(jQuery);
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic TimeSpinner - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script src="../../plugins2/jquery.parser.js"></script>
<script src="../../plugins2/jquery.validatebox.js"></script>
<script src="../../plugins2/jquery.spinner.js"></script>
<script src="../../plugins2/jquery.timespinner.js"></script>
</head>
<body>
<h2>Basic TimeSpinner</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click spin button to adjust time.</div>
</div>
<div style="margin:10px 0;"></div>
<input class="easyui-timespinner" style="width:80px;">
</body>
</html>
插件效果
