Skip to content
Related Articles

Related Articles

How to make use of multi-mode jtsage-datebox plugin?
  • Last Updated : 25 Oct, 2020
GeeksforGeeks - Summer Carnival Banner

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 enviroment -->
    <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" 
         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" 
   4.3.1/css/bootstrap.min.css">
   popper.js/1.12.9/umd/popper.min.js"></script>    
   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/bulma@0.8.0/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.

html




<!DOCTYPE html> 
<html lang="en"
<head
       <!--  jQuery mobile libraries -->
    <link rel="stylesheet" 
    </script>
        <script type="text/javascript" src="../src/js/framework/jqm.js"></script>
    <!--  jQuery mobile libraries -->
    <script type="text/javascript">
        jQuery.extend(jQuery.jtsage.datebox.prototype.options, {
            /* Mode */        
            mode : "datebox",
  
            /* Display */
            displayMode : "dropdown",
            displayDropdownPosition : "bottomMiddle",
              
            linkedField : false,
  
            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,            
            useCancelButton     : true,
            useClearButton      : true,            
            useTodayButton      : true,            
        });
    </script>
      
</head>
<body>
    <div data-role="page" id="main"
        <div data-role="header" data-position="fixed"
            <h3>DateBox </h3>
        </div>
        <div class="ui-content" role="main">
                          
            <div class="ui-field-contain">
            <label for="db">Year Pick</label>
            <input name="db" type="text" data-mini="true" 
                        data-role="datebox" id="db" />
            </div>
            <div id="db-dbAttach"></div>
  
            <div class="ui-field-contain">
            <label for="db2">Year Pick</label>
            <input name="db2" type="text" data-mini="true" 
            data-options='{"mode":"datebox", "overrideDateFieldOrder": ["y"],
            "overrideHeaderFormat":"%Y", "overrideDateFormat": "%Y" }' 
                        data-role="datebox" id="db2" />
            </div>
  
            <div class="ui-field-contain">
            <label for="db3">Year Picker - Flipbox</label>
            <input name="db3" type="text" data-mini="true" 
            data-options='{"mode":"flipbox", "overrideDateFieldOrder": ["y"],
            "overrideHeaderFormat":"%Y", "overrideDateFormat": "%Y" }' 
                        data-role="datebox" id="db2" />
            </div>            
        </div>
  
        <div data-role="footer" data-position="fixed">
            <h1>jQuery Mobile datebox Information</h1>
        </div>
    </div>
  
</body>
</html>

Output: 
 

 

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :