Tuesday, 15 September 2015

jQuery in XPages: Using pickadate.js in XPages Part III - Pre-fill values using Custom Formats

In this blog post I will show how a pre-defined value using a custom formatting rule for the format option can be used in pickadate.js. When using a custom formatting rule for the format option the input element should be given a data-value attribute formatted using the formatSubmit – the element’s value can be left blank. This helps to parse the date from custom formats into various languages.

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

Rule Description Result
d Date of the month 1 -31
dd Date of the month with a leading zero 01 -31
ddd Day of the week in short form Sat -Sun
dddd Day of the week in full form Saturday - Sunday
m Month of the year 1 - 12
mm Month of the year with a leading zero 01 - 12
mmm Month name in short form Dec - Jan
mmmm Month name in full form December - January
yy Year in short form * 00 - 99
yyyy Year in full form 2000 - 2999

* If you use the yy rule in the format option, you must specify the yyyy rule in the formatSubmit option with the appropriate data-value attribute to ensure the date parses accurately. Never use the yy rule in the formatSubmit option.

B. Setup Input Field in XPages
In the Edit Box (inputText1) a data attribute, date-value, needs to be added to pre-fill the date.

<div class="col-md-5">
<xp:inputText id="inputText1">
<xp:this.attrs>
<xp:attr name="data-value" value="15-09-2015">
</xp:attr>
</xp:this.attrs></xp:inputText>
</div>

C. Final result in XPages


D. 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',
formatSubmit: '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:this.attrs>
<xp:attr name="data-value" value="15-09-2015"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

E. Related Blog Posts
Using pickadate.js in XPages Part II - Setup the Time Input Picker
Using Pickadate.js a mobile-friendly responsive and lightweight jQuery Date and Time Input Picker in XPages

No comments:

Post a Comment