Skip to content
Related Articles

Related Articles

Improve Article

EasyUI jQuery datetimebox widget

  • Last Updated : 31 Mar, 2021
Geek Week

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 datetimebox using jQuery EasyUI. datetimebox widget is a calendar to access date, months, years, and time also. 

Downloads for EasyUI for jQuery:

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

Syntax:

<input class="easyui-datetimebox">

Properties:



  • currentText: The text to display for the current day button.
  • closeText: The text to display for the close button.
  • okText: The text to display for the ok button.
  • spinnerWidth: The width of the timespinner component that embed in the datetimebox.
  • showSeconds: Defines if to display the second information.
  • hour12: Defines if to display the time in 12-hour format.
  • timeSeparator: The time separator between hour and minute and second.

Methods:

  • options: Return the options object.
  • spinner: Return the timespinner object.
  • setValue: Set the datetimebox value.
  • cloneFrom: Clone the datetimebox from a source datetimebox.

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




<!doctype html> 
<html
  
<head
    <meta charset="UTF-8"
    <meta name="viewport" content="initial-scale=1.0, 
        maximum-scale=1.0, user-scalable=no"> 
              
    <!-- 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"
      $(document).ready(function (){ 
        $('#gfg').datetimebox({ 
           closeText: 'close',
           okText: 'open'
        }); 
      }); 
    </script
</head
  
<body>
  
    <h1>GeeksforGeeks</h1>
    <h3>EasyUI jQuery datetimebox widget</h3>
    
    <input id="gfg" class="easyui-datetimebox">
  
</body>
</html>

Output:

 

Reference: http://www.jeasyui.com/documentation/




My Personal Notes arrow_drop_up
Recommended Articles
Page :