📌  相关文章
📜  jQWidgets jqxTimePicker 完整参考(1)

📅  最后修改于: 2023-12-03 15:16:57.361000             🧑  作者: Mango

jQWidgets jqxTimePicker 完整参考

jQWidgets jqxTimePicker 是一个适用于 Web 应用程序的时间选择器，使用简单，功能强大。本文将为你介绍 jQWidgets jqxTimePicker 的完整参考资料，内容丰富，包括 API、事件、方法和示例，让你更加深入地了解 jqxTimePicker。

API

以下是 jQWidgets jqxTimePicker 的常用 API：

值相关
  • val(value: string | date): string | date：获取或设置时间选择器的选定时间值。
  • getHours(): number：获取时间选择器的小时部分的值。
  • getMinutes(): number：获取时间选择器的分钟部分的值。
  • getSeconds(): number：获取时间选择器的秒部分的值。
功能相关
  • setOptions(options: jqwidgets.TimePickerOptions): void：更改时间选择器的选项。
  • destroy(): void：销毁时间选择器并删除它的所有事件处理程序和元素。
样式相关
  • addClass(className: string): void：向时间选择器添加一个或多个类。
  • removeClass(className: string): void：从时间选择器中删除一个或多个类。
  • refresh(): void：刷新时间选择器以更新其外观。
事件

以下是 jQWidgets jqxTimePicker 的常用事件：

  • valueChanged：当时间选择器的选定时间值更改时触发。
  • open：当时间选择器打开时触发。
  • close：当时间选择器关闭时触发。
方法

以下是 jQWidgets jqxTimePicker 的常用方法：

  • focus(): void：将焦点设置到时间选择器。
  • blur(): void：从时间选择器中移除焦点。
  • select(): void：选择时间选择器的文本。
  • render(): void：渲染时间选择器。
示例

以下是 jQWidgets jqxTimePicker 的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jqxTimePicker 示例</title>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
    <script src="https://jqwidgets.com/public/jqwidgets/scripts/jquery-3.5.1.min.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
</head>
<body>
    <div id="jqxTimePicker"></div>
    <script>
        $(document).ready(function () {
            $('#jqxTimePicker').jqxTimePicker({
                width: '300px',
                height: '30px',
                formatString: 'T'
            });
        });
    </script>
</body>
</html>

以上是 jQWidgets jqxTimePicker 的完整参考资料，希望可以对你有所帮助。