199 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
IBM Notes and Domino Feature Pack 9 Available for Download on IBM Fix Central (Zircon)
Fri, Aug 18th 2017 13
Using jQuery-Confirm a Multipurpose Plugin for Alert, Confirm and Dialog with Extended Features in XPages
Thu, Jul 27th 2017 6
Using iziToast an Elegant, Responsive, Flexible and Lightweight Notification Plugin in XPages
Fri, Jul 21st 2017 9
IBM Notes Domino 9.0.1 Feature Pack 9 Preliminary Release Notice
Thu, Jul 20th 2017 7
Using Vex - Beautiful Functional Dialogs in Vanilla JavaScript in XPages
Wed, Jul 19th 2017 4
Using iziModal An Elegant, Responsive, Flexible and Lightweight Modal Plugin in XPages
Fri, Jul 7th 2017 6
IBM Sametime 9.0.1 FP1 Available for Download on IBM Fix Central
Thu, Jul 6th 2017 9
Top 10
IBM Domino and IBM Notes 9.0.1 FP7 available for download on IBM Fix Central
Tue, Sep 13th 2016 26
Using Bootstrap Dual Listbox a Responsive Dual Listbox Widget in XPages
Wed, Oct 12th 2016 16
IBM Notes Domino 9.0.1 Feature Pack 8 Preliminary Fix List and New Features
Sat, Jan 28th 2017 16
Using the Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages
Wed, Jun 3rd 2015 15
Bootstrap Plugins in XPages Part III - Dialog Boxes using Bootbox
Sun, Apr 3rd 2016 15
IBM Notes and Domino Feature Pack 9 Available for Download on IBM Fix Central (Zircon)
Fri, Aug 18th 2017 13
Notes Domino 9.0.2 and Notes Domino 9.0.1 Fix Pack 7
Sat, Jul 30th 2016 10
IBM Domino 9.0.1.Feature Pack 8 Interim Fix 3 Available for Download on IBM Fix Central
Sun, May 7th 2017 10
IBM Notes Domino 9.0.1 Fix Pack 5 Released
Mon, Nov 30th 2015 9
IBM Sametime 9.0.1 FP1 Available for Download on IBM Fix Central
Thu, Jul 6th 2017 9


Using the Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
   

A few months ago I wrote a post blog post about how to use the Bootstrap 3 DateTime Picker in XPages, Using Bootstrap DateTimePicker. In this revised blog post I will show how the Bootstrap 3 DateTime Picker can be used in XPages using a slightly different appraoch. I am using version 4 of the the Bootstrap 3 DateTime Picker and version 2.10 of Moment, the latest revisions. There are some major changes in the Options and Functions. The plugin is actually completely rewritten.

Minimal Requirements
- jQuery
- Moment.js
- Bootstrap.js (transition and collapse are required)
- Bootstrap Datepicker script
- Bootstrap CSS
- Bootstrap Datepicker CSS
- Locales: Moment's locale files

Adding the JS and CSS files
To use the Bootsrap 3 DateTime Picker in XPages first the Bootstrap 3 DateTime Picker and Moment files must be downloaded and added to the WebContent Folder in the Package Explorer.
You can download the Bootstrap DateTime Picker files from GitHub : DateTimePicker
You can also download the Moment files from GitHub: Moment


Next the JavaScript files / Stylesheet  bootstrap-datetimepicker.css, bootstrap-datetimepicker.js and moment-with-locales.js must be included on the XPage or Custom Control. In this example I add the files directly to the XPage. Further I load Moment first to avoid any possible sequential loading problems. Hereby I use the provided solution by Sven Hasselbach. I use moment-with-locales.js in order to make use of the Locales files.

<xp:this.properties>
<xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>  
<xp:this.resources>
<xp:headTag tagName="script">
<xp:this.attributes>
<xp:parameter name="type" value="text/javascript" />
<xp:parameter name="src" value="moment210/moment-with-locales.js"/>
</xp:this.attributes>
</xp:headTag>

<script type="text/javascript" src="bootstrapdatetimepicker4/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="/bootstrapdatetimepicker4/css/bootstrap-datetimepicker.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 Custom Control / XPage. You can add the XSnippet to the Script Libraries.



<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>

The script itself can be made up as follows. The name of the id in the script must correspond with the id of the DateTime Picker (input-group).

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

AMD Loader
Finally, the JavaScript file bootstrap-datetimepicker.js needs 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. You have to change the source code of the library. In the JavaScript file (bootstrap-datetimepicker.js) find the lines that determine if it can use the AMD loader. They can mostly be found at the beginning or end of a JavaScript file. Below the modifications made in the bootstrap-datetimepicker.js file.

(function (factory) {
    'use strict';
    //if (typeof define === 'function' && define.amd) {
        // AMD is used - Register as an anonymous module.
        //define(['jquery', 'moment'], factory);
    //} else if (typeof exports === 'object') {
        //factory(require('jquery'), require('moment'));
   // } else {
        // Neither AMD nor CommonJS used. Use global variables.
       if (typeof jQuery === 'undefined') {
            throw 'bootstrap-datetimepicker requires jQuery to be loaded first';
        }
        if (typeof moment === 'undefined') {
            throw 'bootstrap-datetimepicker requires Moment.js to be loaded first';
        }
        factory(jQuery, moment);
   // }

Basic Setup in XPages
<div class="page-header">
<h1>
Datetimepicker V4 <xp:span style="color:rgb(255,255,255)"></xp:span><small>Bootstrap plugin</small></h1>
</div>
<div class="col-sm-12">
<div class="well well-small">Format date, Locales and placeholder with an Attribute</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<xp:inputText id="inputText2" styleClass="form-control" value="#{document1.DateOfBirth}">
<xp:this.attrs>
<xp:attr name="data-date-format" value="DD-MM-YYYY hh:mm:ss"></xp:attr>
<xp:attr name="placeholder" value="Enter data and time"></xp:attr>
</xp:this.attrs>
<xp:this.converter>
<xp:convertDateTime type="date" dateStyle="short"></xp:convertDateTime>
</xp:this.converter>
</xp:inputText>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>

The result is a  good looking Bootstrap style DateTime Picker Control.


Example with Options
In the example below, I use the following options (for a complete list I refer to the documentation: Options ):
- locale: 'nl'
- showTodayButton:true - Show the "Today" button in the icon toolbar.
- showClose: true - Show the "Close" button in the icon toolbar.
- daysOfWeekDisabled: [0,6] - Disables the section of days of the week, e.g. weekends.
- format:('DD-MM-YYYY, HH:mm:ss') - Format Day, Month, Year including 24 hour display

<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:datetimepicker2}" ).datetimepicker({
locale: 'nl',
showTodayButton:true,
showClose: true,
daysOfWeekDisabled: [0,6],
format:('DD-MM-YYYY HH:mm:ss')
});
});
]]></xp:this.value>
</xp:scriptBlock>

<div class="col-sm-12">
<div class="well well-small">Date Time Picker including options</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<xp:inputText id="inputText3" styleClass="form-control">
<xp:this.converter>
<xp:convertDateTime type="date"></xp:convertDateTime>
</xp:this.converter>
</xp:inputText>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>

The final result. 
Remark: If only the date should be displayed it can be specified in the Option Format.
Format dictates what components are show, eg DD-MM-YYYY will not display the time picker.



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.properties>
<xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>     
<xp:this.resources>
<xp:headTag tagName="script">
<xp:this.attributes>
<xp:parameter name="type" value="text/javascript" />
<xp:parameter name="src" value="moment210/moment-with-locales.js"/>
</xp:this.attributes>
</xp:headTag>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="bootstrapdatetimepicker4/js/bootstrap-datetimepicker.js" clientSide="true"></script>
<link rel="stylesheet" href="bootstrapdatetimepicker4/css/bootstrap-datetimepicker.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:datetimepicker1}" ).datetimepicker({
locale: 'nl'
});
});
]]></xp:this.value>
</xp:scriptBlock> 
<xp:scriptBlock id="scriptBlock2">
 <xp:this.value><![CDATA[
 $(document).ready(
 function() {
 x$( "#{id:datetimepicker2}" ).datetimepicker({
 locale: 'nl',
 showTodayButton:true,
 showClose: true,
 daysOfWeekDisabled: [0,6],
 format:('DD-MM-YYYY HH:mm:ss')
 });
 });
 ]]></xp:this.value>
 </xp:scriptBlock>
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>Datetimepicker V4<xp:span style="color:rgb(255,255,255)"></xp:span>
<small>Bootstrap plugin</small></h1>
</div>
<div class="col-sm-12">
<div class="well well-small">Format date, Locales and placeholder with an Attribute</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<xp:inputText id="inputText2" styleClass="form-control" value="#{document1.DateOfBirth}">
<xp:this.attrs>
<xp:attr name="data-date-format" value="DD-MM-YYYY hh:mm:ss"></xp:attr>
<xp:attr name="placeholder" value="Enter data and time"></xp:attr>
</xp:this.attrs>
<xp:this.converter>
<xp:convertDateTime type="date" dateStyle="short">
</xp:convertDateTime>
</xp:this.converter>
</xp:inputText>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>        
<div class="col-sm-12">
<div class="well well-small">Date Time Picker including options</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<xp:inputText id="inputText3" styleClass="form-control">
<xp:this.converter>
<xp:convertDateTime type="date"></xp:convertDateTime>
</xp:this.converter>
</xp:inputText>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>        
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

There are other ways to integrate the  Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages but in this particular case I have chosen for a different approach which also works properly. 

---------------------
http://xpagesandmore.blogspot.com/2015/06/using-bootstrap-3-datetime-picker.html
Jun 03, 2015
16 hits



Recent Blog Posts
13
IBM Notes and Domino Feature Pack 9 Available for Download on IBM Fix Central (Zircon)
Fri, Aug 18th 2017 6:06p   Johnny Oldenburger
IBM Notes Domino Feature Pack 9 is available for download on IBM Fix Central. It seems that all Feature Packs are getting a 'name'. For Features Pack 9 this is Zircon. Notes/Domino 9.0.1 Feature Pack 9 addresses defects in the Client, Server, and the Domino OpenSocial component. All Feature Packs are language independent and may be applied on any language version of Notes®/Domino® 9.0.1. IBM Notes Feature Pack 9 IBM Domino Feature Pack 9 New Features in IBM Domino 9.0.1 Social Edition F
6
Using jQuery-Confirm a Multipurpose Plugin for Alert, Confirm and Dialog with Extended Features in XPages
Thu, Jul 27th 2017 4:16p   Johnny Oldenburger
In my continuous search for modern plugins for my XPages applications I came across jquery-confirm, a good alternative for iziToast (see my previous blog post Using iziToast an Elegant, Responsive, Flexible and Lightweight Notification Plugin in XPages). jquery-confirm is a multipurpose plugin for alert, confirm and dialogs with Extended features. jquery-confirm is easy to use, highly flexible and provides a great set of features like, Auto-close, Ajax-loading, Themes, Animations and more. This
9
Using iziToast an Elegant, Responsive, Flexible and Lightweight Notification Plugin in XPages
Fri, Jul 21st 2017 10:32a   Johnny Oldenburger
After the implementation of iziModal in a new XPages application, see my previous blog post 'Using iziModal An Elegant, Responsive, Flexible and Lightweight Modal Plugin in XPages', I also chose a modern notification plugin for this XPages application, IziToast. iziToast is an legant, responsive, flexible and lightweight notification plugin with no dependencies. All modern browsers are supported (Tested in Chrome, Firefox, Opera, Safari, IE10+ and Edge). In order to use iziToast, the JavaScrip
7
IBM Notes Domino 9.0.1 Feature Pack 9 Preliminary Release Notice
Thu, Jul 20th 2017 9:56p   Johnny Oldenburger
Beginning with 9.0.1 FP8, fix packs have been renamed to feature packs. To ensure quality, these feature packs still have a high focus on addressing high impacting defects. Where possible, these features are optionally enabled to minimize risk. The same packaging, architecture and install kits used in previous fix packs remain in use for feature packs. Notes®/Domino® 9.0.1 Feature Pack 9 addresses defects in the Client, Server, and the Domino OpenSocial component. All Feature Packs are langua
4
Using Vex - Beautiful Functional Dialogs in Vanilla JavaScript in XPages
Wed, Jul 19th 2017 12:42p   Johnny Oldenburger
In my continuous search for modern plugins for my XPages applications I came across Vex. Vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. Vex is tiny (5.5kb minified and gzipped), has a clear and simple API, works on mobile devices, and can be customized to match your style in seconds. Features Drop-in replacement for alert, confirm, and prompt Easily configurable animations which are smooth as butter Lightweight with no external dependencie
6
Using iziModal An Elegant, Responsive, Flexible and Lightweight Modal Plugin in XPages
Fri, Jul 7th 2017 1:30p   Johnny Oldenburger
In my search for modern plugins for my XPages applications I came across iziModal. iziModal is an elegant, responsive, flexible and lightweight Modal Plugin. In order to use iziModal, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: iziModal. Below a basic example how iziModal 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 t
9
IBM Sametime 9.0.1 FP1 Available for Download on IBM Fix Central
Thu, Jul 6th 2017 6:16a   Johnny Oldenburger
IBM Sametime 9.0.1 FP1 release is available. All customers are recommended to upgrade to this release. Update IBM Sametime V9.0 and V9.0.1 servers to Feature Pack 1 by downloading packages provided here in Fix Central and installing with the Update option. You can also use these 9.0.1 FP1 builds for a fresh install of servers and clients. It resolves a number of issues. Form more details: IBM Sametime 9.0.1 FP1 release - June 2017 Read the documentation on how to upgrade to 9.0.1 FP1 here: IBM S
4
Using Selectize for List Boxes and Combo Boxes in XPages
Fri, Jun 23rd 2017 9:37a   Johnny Oldenburger
Selectize is the hybrid of a textbox and box. It's jQuery based and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc. It clocks in at around 7kb (gzipped). The goal is to provide a solid & usable user-experience with a clean and powerful API. Selectize is a lot like Chosen, Select2, and Tags Input but with a few advantages. In order to use Selectize, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The lates
4
Using SweetModal in XPages: Alert, Confirm, Prompt and Modal- Only Better!
Thu, Jun 22nd 2017 12:50p   Johnny Oldenburger
One of the requirements for a new XPages Project constisted of a lightweight and powerful Confirm, Alert, Prompt and Modal functionality. In my search I came across SweetModal, a lightweight and powerful jQuey Plugin. In order to use SweetModal, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: SweetModal. Below a basic example how SweetModal can be used in an XPages application. Adding the JS and CSS files The Ja
6
Using flatpickr a Lightweight and Powerful Datetime Picker in XPages
Wed, Jun 21st 2017 12:30p   Johnny Oldenburger
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. T




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition