EasyUI jQuery timepicker widget

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.

In this article, we will learn how to design a time picker using jQuery EasyUI. The TimePicker widget is used to show a picker that can be used to select a time in the required format.

Downloads for EasyUI for jQuery:

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

Syntax:

<input class="easyui-timepicker">

Properties:

closeText: It is the text to display for the close button.
okText: It is the text to display for the ok button.
value: It is the default time of the picker.
ampm: These are the labels for AM and PM buttons.
hour24: It defines whether to display the time in a 24-hour format.

Methods:

options: It returns the options object.
getValue: It gets the component value.
setValue: It sets the component value.
reset: It resets the component value.

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

<script type="text/javascript" src="jquery.min.js"></script>  <script type="text/javascript" src="jquery.easyui.min.js"> </script>  <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').timepicker({
      hour24: false
    })
  </script>
</head>

<body>

  <h1>GeeksforGeeks</h1>
  <h3>EasyUI jQuery timepicker widget</h3>

  <!-- Define the EasyUI TimePicker 
  with markup -->
  <input id="gfg" class="easyui-timepicker">
</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 timepicker widget</h3>

  <!-- Define the element that 
  will be used as the TimePicker -->
  <input id='gfg'>

  <script type="text/javascript">

    // Initialize the EasyUI TimePicker
    $('#gfg').timepicker({
      hour24: false
    });
  </script>
</body>
</html>

Output:

Reference: https://www.jeasyui.com/documentation/timepicker.php

EasyUI jQuery timepicker widget

Explore