Wednesday, 21 June 2017

Using flatpickr a Lightweight and Powerful Datetime Picker in XPages

One of the requirements for a new XPages Project constisted of a lightweight and powerful Datetime Picker functionality. In my search I came across flatpickr, a lightweight and powerful Datetime Picker. Lean, UX-driven, and extensible, yet it doesn’t depend on any libraries. There’s minimal UI but many themes. Rich, exposed APIs and event system make it suitable for any environment.
In order to use flatpickr, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: flatpickr. Below a basic example how flatpickr can be used in an XPages application.

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 flatpickr has been added in the WebContent Folder.
Next the JavaScript and CSS files, flatpickr.js and flatpickr.css, must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<link rel="stylesheet" href="flatpickr/flatpickr.css" />
<script type="text/javascript" src="flatpickr/flatpickr.js"></script>

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}" ).flatpickr({
dateFormat: 'd-m-Y',
placeholder: 'Select Date..',
locale: {
firstDayOfWeek: 1 // start week on Monday
}
});
})
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a responsive DateTime Picker functionality 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">
<link rel="stylesheet" href="flatpickr/flatpickr.css" />
<script type="text/javascript" src="flatpickr/flatpickr.js"></script>
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).flatpickr({
dateFormat: 'd-m-Y',
placeholder: 'Select Date..',
locale: {
firstDayOfWeek: 1 // start week on Monday
}
});
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="col-md-7"><h3>Flatpickr</h3>
<h5>flatpickr is a lightweight and powerful datetime picker. Lean, UX-driven, and extensible, yet it doesn’t depend on any libraries. There’s minimal UI but many themes. Rich, exposed APIs and event system make it suitable for any environment.</h5></div>
<div class="col-md-7">
<xp:inputText id="inputText1">
<xp:this.attrs>
<xp:attr name="placeholder" value="Select Date..."></xp:attr>
</xp:this.attrs>
</xp:inputText>    
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

For more information: flatpickr introduction

4 comments: