jQuery EasyUI API 中文文档 – TimeSpinner时间微调器

我可以为你详细讲解“jQuery EasyUI API 中文文档 - TimeSpinner时间微调器”的完整攻略。TimeSpinner时间微调器是EasyUI提供的一个时间选择工具，可以方便地进行时间选择和微调。下面是完整攻略的内容：

1. 引入EasyUI库文件

在使用TimeSpinner之前，需要先引入EasyUI库文件，可以通过CDN或下载文件到本地进行使用。以下是CDN地址示例：

<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/jqueryui/1.12.0/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/easyui/1.6.6/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/easyui/1.6.6/themes/icon.css">
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/easyui/1.6.6/jquery.easyui.min.js"></script>

2. 创建TimeSpinner

在HTML中添加一个空容器，用于创建TimeSpinner。

<input id="ts"/>

然后在JavaScript中创建TimeSpinner：

$('#ts').timespinner();

上面的代码会创建一个默认样式的TimeSpinner，可以通过设置各种参数来改变TimeSpinner的外观和行为。

3. 设置参数和事件

以下是TimeSpinner可用的参数和事件。

参数

• width：控件宽度。
• value：时间值，格式为"HH:mm"。
• editable：控制是否可以手动输入，为布尔值，默认为true。
• disabled：控制是否禁用控件，为布尔值，默认为false。
• required：控制是否必填，为布尔值，默认为false。
• readonly：控制是否只读，为布尔值，默认为false。
• showSeconds：控制是否显示秒，为布尔值，默认为false。
• highlight：高亮显示值是否顶格显示，默认为true。
• spinners：设置微调按钮的位置和风格，可选值为"normal"（默认样式）、"large"（较大样式）和null（不显示微调按钮）。
• formatter：格式化时间值的函数，参数为时间值，返回格式为字符串。
• parser：解析时间值的函数，参数为字符串，返回格式为时间值。

事件

• onChange(newValue, oldValue)：当值改变时触发，参数为新值和旧值。
• onSpinUp：当向上微调时触发。
• onSpinDown：当向下微调时触发。

示例代码：

$('#ts').timespinner({
    width: 120,
    value: '12:34',
    readonly: true,
    showSeconds: true,
    spinners: null,
    formatter: function (value) {
        return value.getHours() + ':' + value.getMinutes() + ':' + value.getSeconds();
    },
    parser: function (value) {
        var d = new Date();
        var time = value.split(':');
        d.setHours(parseInt(time[0], 10));
        d.setMinutes(parseInt(time[1], 10));
        d.setSeconds(parseInt(time[2], 10));
        return d;
    },
    onChange: function (newValue, oldValue) {
        console.log(newValue, oldValue);
    },
    onSpinUp: function () {
        console.log('spin up');
    },
    onSpinDown: function () {
        console.log('spin down');
    }
});

4. 调用方法

以下是TimeSpinner可用的方法：

• getValue：获取时间值，返回Date对象。
• setValue：设置时间值，参数为Date对象。
• destroy：销毁控件。

示例代码：

// 获取时间值
var value = $('#ts').timespinner('getValue');

// 设置时间值
$('#ts').timespinner('setValue', new Date());

// 销毁控件
$('#ts').timespinner('destroy');

希望这个完整攻略对你有帮助。