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">
<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.
<!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.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://www.jsdelivr.com/
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"
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: