How to make use of multi-mode jtsage-datebox plugin?

Last Updated : 31 Jul, 2024

In this article, we will learn to use a multi-mode date and time picker plugin for Bootstrap (3&4), jQueryMobile, and Bulma. The jQuery datebox plugin is completely based on JavaScript, HTML, and CSS technologies.

Some key features of the plugin are as follows

It can limit any condition like date, time, and duration.
Many callbacks and triggers are available on create, open, close, change, destroy events.
The tool provides features like slidable columns or weeks.

Please download the required pre-compiled files from the link and save it in your working folder for implementation.

HTML head section of code: The following HTML code snippet holds the head section which has all the common pre-compiled files required for all the following examples to execute.

Note: Please include all the following library links in your codes with proper file paths.

html

<head>
        <meta http-equiv="Content-Type" 
    content="text/html; charset=utf-8" />
    <meta name="viewport" 
     content="width=device-width, 
         initial-scale=1, maximum-scale=1">

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13Fy
        QuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script>

        <script type="text/javascript" 
         src="../src/js/external/widgetLib.js">
        </script>
    <script type="text/javascript" 
         src="../src/js/baseObject.js"></script>
        <!-- Enhance JavaScript date object--> 
    <script type="text/javascript" 
         src="../src/js/lib/dateEnhance.js"></script>
    <!--Date / Time output --> 
    <script type="text/javascript" 
        src="../src/js/lib/dateFormatter.js"></script>
     <!--Limit functions --> 
    <script type="text/javascript" 
        src="../src/js/lib/dateLimit.js"></script>
    <!-- Date / Time input -->
    <script type="text/javascript" 
        src="../src/js/lib/dateParser.js"></script>
    <!--Event loop -->
    <script type="text/javascript" 
        src="../src/js/lib/eventHandler.js"></script>
     <!--  Date adjustments -->
    <script type="text/javascript" 
        src="../src/js/lib/offset.js"></script>
     <!-- Public functions  -->
    <script type="text/javascript" 
        src="../src/js/lib/public.js"></script>
     <!--  Short utility functions -->
    <script type="text/javascript" 
         src="../src/js/lib/shortUtil.js"></script>
    <script type="text/javascript" 
        src="../src/js/lib/standardControls.js"></script>
    <!-- Create the widget -->
    <script type="text/javascript" 
        src="../src/js/lib/widgetCreate.js"></script>
    <script type="text/javascript" 
        src="../src/js/lib/widgetOpen.js"></script>
     <!--  Closing of the widget -->
    <script type="text/javascript" 
        src="../src/js/lib/widgetClose.js"></script>
     <!-- Destroy, Enable & Disable the widget -->
    <script type="text/javascript" 
        src="../src/js/lib/widgetDestroyEnableDisable.js">
        </script>
     <!-- Handle positioning of the widget -->
    <script type="text/javascript" 
         src="../src/js/lib/positioning.js"></script>
         <!-- Twitter Bootstrap v3.4.1 -->
    <script type="text/javascript" 
        src="../src/js/framework/bootstrap.js"></script>
        <!-- DateBox, TimeBox, DateTimeBox, DurationBox -->
    <script type="text/javascript" 
         src="../src/js/modes/datebox.js"></script>
    <!-- FlipBox, TimeFlipBox, DateTimeFlipBox,
         DurationFlipBox -->
    <script type="text/javascript" 
         src="../src/js/modes/flipbox.js"></script>
    <!-- CalBox -->
    <script type="text/javascript" 
         src="../src/js/modes/calbox.js"></script>
    <!-- SlideBox -->
    <script type="text/javascript" 
        src="../src/js/modes/slidebox.js"></script>
        <!--  Used only in the test environment -->
    <script type="text/javascript" 
        src="../src/js/widgetBinding.js"></script>
    <!--  Auto enhance for data-role on a page -->
    <script type="text/javascript" 
        src="../src/js/autoInit.js"></script>

    <script type="text/javascript" 
     src="https://cdn.jtsage.com/jtsage-datebox/
         i18n/jtsage-datebox.lang.utf8.js">
    </script>
</head>

Example 1: The following date and time picker demonstrate for Bootstrap 4. Do not forget to include Bootstrap(3 & 4) pre-compiled files in your Bootstrap codes as shown below.

html

<!DOCTYPE html> 
<html lang="en"> 
<head> 

  <link rel="stylesheet" 
   href="https://maxcdn.bootstrapcdn.com/bootstrap/
   4.3.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/
   popper.js/1.12.9/umd/popper.min.js"></script>    
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/
   4.3.1/js/bootstrap.min.js"></script>

  <script type="text/javascript">        
        jQuery.extend(jQuery.jtsage.datebox.prototype.options, {
            mode : "calbox",

            /* Display */
            displayMode : "inline",            
            lockInput: false,

            displayDropdownPosition : "bottomRight",            
            useImmediate     : true,
            useFocus         : true,
            useButton : true,

            /* Callbacks */
             beforeOpenCallbackArgs : [ "helloback call", "bye"],
             beforeOpenCallback     : function(a, b)
                                            { 
                                            console.log(a);
                                            console.log(b);
                                            return true;
                                            },

            closeCallbackArgs : [ "hi close", "bye close"],
            closeCallback     : function(a, b) 
                                          { 
                                          console.log(a);
                                          console.log(b);
                                          },

            calDateList     : [ 
                                          ["1980-04-25", "JT's Date of Birth"],
                                          ["1809-02-12", "Lincoln's Birthday"] ],
            calShowDateList : true,
            slideDateList     : [ ["1980-04-25", "JT's Date of Birth"],
                                           ["1809-02-12", "Lincoln's Birthday"] ],
             slideShowDateList : true,

             minHour : 9,
             maxHour : 5,

             minTime : "9:00",
             maxTime : "17:00",

            slideUsePickers       : true,
            slideYearPickMax      : 2020,
            slideYearPickMin      : 1950,
            
            minuteStep   : 15,

            /* Control Buttons */
             closeTodayButton    : true,        
            useCancelButton     : true,
            useClearButton      : true,            
            useTodayButton      : true,        
            useCollapsedBut     : true,            
        });
    </script>
</head>
<body>
    <div class="container" role="main">        
        <form>        
        <div class="form-group">
            <label class="control-label"for="db">
                        DateBox</label>
            <input class="form-control" name="db" 
            type="text" data-role="datebox" id="db" />
        </div>
        </form>
    </div>
</body>
</html>

Output:

The following is the output shown in the console to demonstrate the working of callback functions.

Example 2: The following code demonstrates for Bulma. Do not forget to include Bulma pre-compiled files in your Bulma codes as shown below.

html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/
  gh/jgthms/[email protected]/css/bulma.css" />
 <script type="text/javascript" 
 src="../src/js/framework/bulma.js"></script>

 <script type="text/javascript">
        jQuery.extend(jQuery.jtsage.datebox.prototype.options,
                     {
            /* Modes can be changed as per user*/             
            mode : "slidebox",

            /* Display */
            displayMode : "dropdown",
            
            /* Linked fields */
            linkedField : false,    
            slideShowDateList : true,
            
            calDateList     : [ ["1980-04-25", "JT's Date of Birth"], 
                                          ["1809-02-12", "Lincoln's Birthday"] ],
            calShowDateList : true,

            slideDateList     : [ ["1980-04-25", "JT's Date of Birth"],
                                         ["1809-02-12", "Lincoln's Birthday"] ],
            slideShowDateList : true,
            
            calUsePickers       : true,
            slideUsePickers       : true,

            calUsePickers       : true,            
            slideUsePickers       : true,            
            useCancelButton     : true,            
            useTodayButton      : true,            
            useCollapsedBut     : true,
            
            useCancelButton     : true,
            useClearButton      : true,            
            useTodayButton      : true,            
            useCollapsedBut     : true,
        });
    </script>
    <style>
     body{
     width:550px;
     padding:10px,10px;
     }
     h3{
      margin:0 auto;
      padding:20px,20px;
     }
    </style>
    
</head>
<body>
   <h3>Datebox in Bulma </h3>
    <div class="container" role="main">
        <form class="form">

        <div class="field is-horizontal">
            <div class="field-label is-normal">
             <label class="label" for="db">DateBox</label>
            </div>
            <div class="field-body">
              <div class="field">
                  <div class="control">
                 <input class="input" name="db" type="text"
                  data-role="datebox" id="db" />
                  </div>
               </div>
            </div>
        </div>
        </form>    
    </div>
</html>

Output: The following is the output when the mode selected by the developer is "datebox"

The following is the output when the mode selected by the developer is "slidebox".

Note: The developer can try different modes and implement various callback functions and other JavaScript options as per the application's requirement. Only a few options are shown for the demonstration.

Example 3: The following code demonstrates the date and time picker for jQuery mobile codes. Do not forget to include jQuery mobile pre-compiled files in your codes for mobile designs as shown below. Callback functions can be implemented the same as shown in the first example as required.