Thursday, 3 September 2015

Using Pickadate.js a mobile-friendly responsive and lightweight jQuery Date and Time Input Picker in XPages

In this blog post I will show how you can use pickadate.js, a mobile-friendly responsive and lightweight jQuery Date and Time Input Picker, in XPages. In this first blog post I will show the basic setup of the Date Picker in XPages.

Features pickadate.js
  • Supports jQuery 1.7 and up.
  • Is ARIA-enabled to be WCAG 2.0 compliant. (added in v3.4)
  • Loads a tiny JS and CSS footprint.
  • Comes with translations for over 40 languages.
  • Has touch & keyboard friendliness.
  • Follows BEM style class naming.
  • Utilizes LESS based stylesheets.
  • Includes a Grunt based build system.
There’s a tonne of options to customize the date and time pickers, such as month/year selectors, time intervals, etc. There’s also a rich API to extend the functionality of the picker.

Adding the JS and CSS files
In order to use pickadate.js, the JavaScript and CSS files need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: pickadate.js 3.5.6.
In this example a Folder pickadate has been added in the WebContent Folder.


Next the JavaScript and CSS files, picker.js, picker.date.js, picker.time.js, default.css, default.date.css and default.time.css must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<script type="text/javascript" src="pickadate/lib/picker.js"></script>
<script type="text/javascript" src="pickadate/lib/picker.date.js"></script>
<script type="text/javascript" src="pickadate/lib/picker.time.js"></script>
<link rel="stylesheet" href="pickadate/lib/themes/default.css" type="text/css" />
<link rel="stylesheet" href="pickadate/lib/themes/default.date.css" type="text/css" />
<link rel="stylesheet" href="pickadate/lib/themes/default.time.css" type="text/css" />

Adding the x$ jQuery selector for XPages
Furthermore I use the the great XSnippet by Mark Roden (again), x$ jQuery selector for XPages, to initialize the plugin and include it on the XPage. The XSnippet can be added to the Script Libraries.
The script itself can be made up as follows. The name of the id in the script must correspond with the id of the Edit Box (inputText1).

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() { 
x$( "#{id:inputText1}" ).pickadate();
}
);
]]></xp:this.value>
</xp:scriptBlock>

AMD Loader Fix
Finally, the JavaScript filea picker.js, picker.date.js and picker.time.js need to be adjusted. Reason: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages. The source code of the library can be adjusted in a very simple way with just a slight modification. 

1. Go to the WebContent Folder and select the JavaScript file(s)
2. Select Open With - Client/Server JS Editor
3. Removed in the second line define.amd and replace it with false 


4. Save the JavaScript files

The final step is to simple add an Edit Box on the XPages.

<div class="col-md-5">
<xp:inputText id="inputText1"></xp:inputText>
</div>

The result is a  good looking jQuery responsive DatePicker in XPages.


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="pickadate/lib/picker.js"></script>
<script type="text/javascript" src="pickadate/lib/picker.date.js"></script>
<script type="text/javascript" src="pickadate/lib/picker.time.js"></script>
<link rel="stylesheet" href="pickadate/lib/themes/default.css" type="text/css" />
<link rel="stylesheet" href="pickadate/lib/themes/default.date.css" type="text/css" />
<link rel="stylesheet" href="pickadate/lib/themes/default.time.css" type="text/css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).pickadate({
format: 'dd-mm-yyyy',
hiddenName: true
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="col-md-5">
<xp:inputText id="inputText1"></xp:inputText>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In the next blog post more about various options of the Date Picker and the basic setup of the Time Picker.

No comments:

Post a Comment