EasyUI jQuery datebox 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 datebox using jQuery EasyUI. datebox widget is a calendar to access dates, months, and years.

Downloads for EasyUI for jQuery:

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

Syntax:

<input class="easyui-datebox">

Properties:

panelWidth: The drop down calendar panel width.
panelHeight: The drop down calendar panel height.
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, reserved for datetimebox plugin.
disabled: When true to disable the field.
buttons: The buttons underneath the calendar.

Event:

onSelect: Fires when user select a date.

Methods:

options: Return the options object.
calendar: Get the calendar object.
setValue: Set the datebox value.
cloneFrom: Clone the datebox from a source datebox

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

<script type="text/javascript" src="https://www.geeksforgeeks.org/jquery.min.js"> </script>  <script type="text/javascript" src="https://www.geeksforgeeks.org/jquery.easyui.min.js"> </script>

<script type="text/javascript" src="https://www.geeksforgeeks.org/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').datebox({ 
          closeText: 'text',
        }); 
      }); 
    </script> 
</head> 

<body>

    <h1>GeeksforGeeks</h1>
    <h3>EasyUI jQuery datebox widget</h3>
    <input id="gfg" class="easyui-datebox">

</body>
</html>

Output:

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

EasyUI jQuery datebox widget

Explore