How to make use of multi-mode jtsage-datebox plugin?
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/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" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" /> < script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js" > </ 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:
Contact Us