Wednesday, 9 September 2015

jQuery in XPages: Using pickadate.js in XPages Part II - Setup the Time Input Picker

In my previous blog post about pickadate.js, Using Pickadate.js a mobile-friendly responsive and lightweight jQuery Date and Time Input Picker in XPages, I showed how the Date Input Picker can be used in XPages. I also described the basic setup of pickadate.js in XPages. In this blog post I show how the Time Input Picker can be used in XPages. The basic setup requires targetting an input element and invoking the Time Picker: $('.timepicker').pickatime()

Formatting rules
The following rules can be used to format any time.

Rule Description Result
h Hour in 12-hour format 1 -12
hh Hour in 12-hour format with a leading zero 01 -12
H Hour in 24-hour format 0 -23
HH Hour in 24-hour format with a leading zero 00 -23
i Minutes 00 - 59
a Day time period a.m. / p.m.
A Day time period in uppercase AM / PM

Basic setup in XPages
The first step is to simple add an Edit Box on the XPages. The Edit Box is used as an input element for the Time Picker.

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

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}" ).pickatime({
format: 'HH:i',
hiddenName: true
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

The result is a  good looking jQuery responsive  Time Input Picker 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}" ).pickatime({
format: 'HH:i',
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>

No comments:

Post a Comment