EasyUI jQuery timespinner 小部件

在本文中，我们将学习如何使用 jQuery EasyUI 设计时间微调器。 TimeSpinner 小部件结合了一个可编辑的文本框和两个小按钮，让用户可以通过增加或减少时间来选择时间值。

EasyUI 是一个 HTML5 框架，用于使用基于 jQuery、React、Angular 和 Vue 技术的用户界面组件。它有助于为交互式 Web 和移动应用程序构建功能，为开发人员节省大量时间。

EasyUI for jQuery 下载：

https://www.jeasyui.com/download/index.php

句法：

财产：

• 分隔符：它是时分秒之间的分隔符
• showSeconds：定义是否显示第二条信息。
• hour12：定义是否以 12 小时格式显示。
• ampm：是显示在输入框上的 AM/PM 标签。
• 突出显示：这是最初必须突出显示的字段。

方法：

• 选项：它返回选项对象。
• setValue：它设置 timespinner 值。
• getHours：获取当前小时值。
• getMinutes：获取当前分钟值。
• getSeconds：它获取当前的第二个值。

CDN 链接：首先，添加项目所需的 jQuery Easy UI 脚本。

示例 1：

HTML

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    $('#gfg').timespinner({
      hour12: false
    })
  


  GeeksforGeeks
  EasyUI jQuery timespinner widget
  
  
  

输出：

示例 2：

HTML

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  


  GeeksforGeeks
  EasyUI jQuery timespinner widget
  
  
  
  
  
    // Initialize the EasyUI TimeSpinner
    $('#gfg').timespinner({
      hour12: false
    });
  

输出：

参考： https : //www.jeasyui.com/documentation/timespinner。 PHP