Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
  • Last Updated : 25 May, 2021
Improve Article
Save Article

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"
         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: 
 

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!