EasyUI jQuery timespinner widget

Last Updated : 31 Mar, 2021

In this article, we will learn how to design a time spinner using jQuery EasyUI. The TimeSpinner widget combines an editable text box and two small buttons that let the user choose a time value by increasing or decreasing the time.

EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

Downloads for EasyUI for jQuery:

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

Syntax:

<input class="easyui-timespinner">

Property:

separator: It is the separator between an hour and a minute and second
showSeconds: It defines if to show the second information.
hour12: It defines if to display in 12-hour format.
ampm: It is the AM/PM label to display on the input box.
highlight: It is the field that has to be highlighted initially.

Methods:

options: It returns the options object.
setValue: It sets the timespinner value.
getHours: It gets the current hour value.
getMinutes: It gets the current minute value.
getSeconds: It gets the current second value.

CDN Link: First, add jQuery Easy UI scripts needed for your project.

<script type=”text/javascript” src=”jquery.min.js”></script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”> </script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>

Example 1:

HTML

<html> 
<head> 
  
  <!-- EasyUI specific stylesheets-->
  <link rel="stylesheet"
        type="text/css"
        href="themes/metro/easyui.css"> 
  
  <link rel="stylesheet" 
        type="text/css" 
        href="themes/mobile.css"> 
  
  <link rel="stylesheet" 
        type="text/css"
        href="themes/icon.css"> 
  
  <!-- jQuery library -->
  <script type="text/javascript" 
          src="jquery.min.js"> 
  </script> 
  
  <!-- jQuery libraries of EasyUI -->
  <script type="text/javascript"
          src="jquery.easyui.min.js"> 
  </script> 
  
  <!-- jQuery library of EasyUI Mobile -->
  <script type="text/javascript"
          src="jquery.easyui.mobile.js"> 
  </script> 
  
  <script type="text/javascript"> 
    $('#gfg').timespinner({ 
      hour12: false 
    }) 
  </script> 
</head> 
<body> 
  <h1>GeeksforGeeks</h1> 
  <h3>EasyUI jQuery timespinner widget</h3> 
  
  <!-- Define the TimeSpinner using markup -->
  <input id="gfg" class="easyui-timespinner"> 
</body> 
</html>

Output:

Example 2:

HTML

<html> 
<head> 
  
  <!-- EasyUI specific stylesheets-->
  <link rel="stylesheet"
        type="text/css"
        href="themes/metro/easyui.css"> 
  
  <link rel="stylesheet" 
        type="text/css" 
        href="themes/mobile.css"> 
  
  <link rel="stylesheet"
        type="text/css"
        href="themes/icon.css"> 
  
  <!--jQuery library -->
  <script type="text/javascript"
          src="jquery.min.js"> 
  </script> 
  
  <!--jQuery libraries of EasyUI -->
  <script type="text/javascript"
          src="jquery.easyui.min.js"> 
  </script> 
  
  <!--jQuery library of EasyUI Mobile -->
  <script type="text/javascript" 
          src="jquery.easyui.mobile.js"> 
  </script> 
</head> 
<body> 
  <h1>GeeksforGeeks</h1> 
  <h3>EasyUI jQuery timespinner widget</h3> 
  
  <!-- Define the element to be used  
  as the TimeSpinner -->
  <input id='gfg'> 
  <script type="text/javascript"> 
  
    // Initialize the EasyUI TimeSpinner 
    $('#gfg').timespinner({ 
      hour12: false 
    }); 
  </script> 
</body> 
</html>