Friday, 1 September 2017

Using Bootstrap Material DateTimePicker in XPages


For a new XPages application I was looking for a simple DateTime Picker. In my search I came accross the Bootstrap Material DateTimePicker plugin. The Material DateTimePicker was originaly designed for Bootstrap Material, the V2.0 is now completely standalone and responsive. Bootstrap Material DateTime Picker relies on Bootstrap, jQuery, Google Material Icon Font and Moment.js.
In order to use the Bootstrap Material DateTimePicker plugin, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Bootstrap Material DateTimePicker.

Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example a Folder bootstrapmaterialdatetimepicker has been added in the WebContent Folder.
Next the JavaScript and CSS files, bootstrap-material-datetimepicker.js, moment.js and bootstrap-material-datetimepicker.css must be included on the XPage or Custom Control. In this example I add the files to an XPage. I also added the link for the fonts.

<script type="text/javascript" src="bootstrapmaterialdatetimepicker/moment.js"></script>
<script type="text/javascript" src="bootstrapmaterialdatetimepicker/js/bootstrap-material-datetimepicker.js"></script>
<link rel="stylesheet" href="bootstrapmaterialdatetimepicker/css/bootstrap-material-datetimepicker.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

AMD Loader Fix
For using Moment in XPages there is a need for an AMD Loader Fix. Reason: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages. In the example below I use two javascript libraries, disable_amd.js and enable_amd.js, a solution provided by Mark Leussink. You can add these scripts to in the Script Libraries of the XPages application.

disable_amd.js
if (typeof define === 'function' && define.amd) {if(define.amd.vendor =='dojotoolkit.org'){define._amd = define.amd;delete define.amd;}}

enable_amd.js
if (typeof define === 'function' && define._amd) {define.amd = define._amd; delete define._amd;}

The first one is loaded before the moments.js files, the second one after the moments.js files.

<script type="text/javascript" src="disable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="bootstrapmaterialdatetimepicker/moment.js"></script>
<script type="text/javascript" src="enable_amd.js" clientSide="true"></script>

Note: There are other solutions for the AMD Fix. For more information about these solutions see my blog post Bootstrap Plugins in XPages Part VI - jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2).

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin. The XSnippet can be added to the Script Libraries. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).bootstrapMaterialDatePicker({
weekStart : 0,
format : 'DD-MM-YYYY',
time: false
});    
})
]]></xp:this.value>
</xp:scriptBlock>

Final Result 
The final result is a good looking responsive DateTimePicker with some additional options in the initial setup.



Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="disable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="bootstrapmaterialdatetimepicker/moment.js"></script>
<script type="text/javascript" src="enable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="bootstrapmaterialdatetimepicker/js/bootstrap-material-datetimepicker.js"></script>
<link rel="stylesheet" href="bootstrapmaterialdatetimepicker/css/bootstrap-material-datetimepicker.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).bootstrapMaterialDatePicker({
weekStart : 0,
format : 'DD-MM-YYYY',
time: false
});    
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText2}" ).bootstrapMaterialDatePicker({
weekStart : 0,
date: false,
format : 'HH:mm'
});    
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="col-md-7">
<h3>Bootstrap Material DateTime Picker</h3>
<h5>
Bootstrap Material DateTime Picker relies on Bootstrap, jQuery, Google Material Icon Font and Moment.js.
</h5>
</div>
<div class="col-md-7">
<xp:inputText id="inputText1"></xp:inputText>
</div>
<xp:br></xp:br>
<xp:br></xp:br>
<div class="col-md-7">
<xp:inputText id="inputText2"></xp:inputText>
</div>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Bootstrap Material DateTimePicker examples.

No comments:

Post a Comment