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.
< 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 ">
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.
<!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.
<!DOCTYPE html> < html lang = "en" >
< head >
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.
<!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: