TimeSpinner（时间微调）
扩展自$.fn.spinner.defaults。使用$.fn.timespinner.defaults重写默认值对象。
时间微调组件的创建基于微调组件。它和数字微调类似，但是显示的时间值。时间微调组件允许用户点击组件右侧的小按钮来增加或减少时间。
依赖关系
使用案例
使用标签创建时间微调组件。
- <input id="ss" class="easyui-timespinner" style="width:80px;"
- required="required" data-options="min:'08:30',showSeconds:true" />
使用Javascript创建时间微调组件。
- <input id="ss" style="width:80px;">
- $('#ss').timespinner({
- min: '08:30',
- required: true,
- showSeconds: true
- });
属性
该组件属性扩展自spinner(微调)，该组件新增的属性如下：
| 属性名 | 属性类型 | 描述 | 默认值 |
|---|---|---|---|
| separator | string | 定义在小时、分钟和秒之间的分隔符。 | : |
| showSeconds | boolean | 定义是否显示秒钟信息。 | false |
| highlight | number | 初始选中的字段 0=小时,1=分钟... | 0 |
| formatter | function(date) |
格式化日期函数，该函数接受date对象型参数并返回一个字符串值。（该属性自1.4版开始可用） 以下的示例代码展示了如何覆盖默认格式化器的方法。 $.fn.timespinner.defaults.formatter = function(date){
if (!date){return '';}
var opts = $(this).timespinner('options');
var tt = [formatN(date.getHours()), formatN(date.getMinutes())];
if (opts.showSeconds){
tt.push(formatN(date.getSeconds()));
}
return tt.join(opts.separator);
function formatN(value){
return (value < 10 ? '0' : '') + value;
}
}
|
|
| parser | function(s) | 解析日期/时间字符串的函数，该函数接受date字符串类型的参数并返回一个date对象值。（该属性自1.4版开始可用）
以下的示例代码展示了如何覆盖默认日期解析器的方法。 $.fn.timespinner.defaults.parser = function(s){
var opts = $(this).timespinner('options');
if (!s){return null;}
var tt = s.split(opts.separator);
return new Date(1900, 0, 0,
parseInt(tt[0],10)||0, parseInt(tt[1],10)||0, parseInt(tt[2],10)||0);
}
|
|
| selections | array | 高亮选择部分的值，突出显示每一部分。例如：将字符从0点到2则高亮小时部分。（该属性自1.4版开始可用） | [[0,2],[3,5],[6,8]] |
事件
该组件事件完全继承自spinner(微调)。
方法
该组件的方法扩展自spinner(微调)，该组件重写的方法如下：
| 方法名称 | 方法参数 | 描述 |
|---|---|---|
| options | none | 返回属性对象。 |
| setValue | value | 设置时间微调组件的值。
代码示例： $('#ss').timespinner('setValue', '17:45'); // 设置时间微调组件的值 |
| getHours | none | 获取当前的小时数。 |
| getMinutes | none | 获取当前的分钟数。 |
| getSeconds | none | 获取当前的秒数。 |
?
