193 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Replay IBM Notes Domino XPages Webinar - Back from the Dead: When Bad Code Kills a Good Server
Tue, May 9th 2017 12
IBM Domino 9.0.1.Feature Pack 8 Interim Fix 3 Available for Download on IBM Fix Central
Sun, May 7th 2017 10
IBM Domino 9.0.1.Feature Pack 8 Interim Fix 2 Available for Download on IBM Fix Central
Fri, Apr 21st 2017 11
Panagenda ApplicationInsights for IBM Notes Domino - Transform the Bits and Bytes of your Notes Databases into Meaningful Information!
Wed, Apr 12th 2017 15
Notes 9.0.1 Feature Pack 8 Interim Fix 1 Available for Download on IBM Fix Central
Mon, Apr 10th 2017 9
IBM NewWayToLearn 2017 starting April 17th
Mon, Apr 3rd 2017 15
Replay IBM Presents the IBM Notes Domino Roadmap and a Deep Dive into Feature Pack 8
Thu, Mar 30th 2017 8
Top 10
IBM Domino and IBM Notes 9.0.1 FP7 available for download on IBM Fix Central
Tue, Sep 13th 2016 48
Notes Domino 9.0.2 and Notes Domino 9.0.1 Fix Pack 7
Sat, Jul 30th 2016 21
IBM Notes Domino 9.0.1 Feature Pack 8 Preliminary Fix List and New Features
Sat, Jan 28th 2017 21
Bootstrap Plugins in XPages Part IV - Awesome Bootstrap Checkbox
Mon, Apr 4th 2016 16
IBM Client Application Access 1.0.1 (ICAA) Enhancements
Sun, Jun 26th 2016 16
IBM NewWayToLearn 2017 starting April 17th
Mon, Apr 3rd 2017 15
Panagenda ApplicationInsights for IBM Notes Domino - Transform the Bits and Bytes of your Notes Databases into Meaningful Information!
Wed, Apr 12th 2017 15
Using the Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages
Wed, Jun 3rd 2015 13
IBM Notes Domino 9.0.1 Fix Pack 5 Released
Mon, Nov 30th 2015 13
Using a Bootstrap Multiselect List Box in XPages
Thu, May 14th 2015 12


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
14 hits



Recent Blog Posts
12
Replay IBM Notes Domino XPages Webinar - Back from the Dead: When Bad Code Kills a Good Server
Tue, May 9th 2017 5:10a   Johnny Oldenburger
On May 2 a very interesting webinar was organized by T.L.C.C and Team Studio, Back from the Dead: When Bad Code Kills a Good Server by Bill Malchisky Jr. and Serdar Basegmez. For those who missed this webinar below the content, slides and video. Content It's Friday and a new customer calls. Their mission critical app is taking :05 to open documents and the users are quite concerned. Where do you start when handed a 20-year-old application you have never seen, on a server you barely know? Join
10
IBM Domino 9.0.1.Feature Pack 8 Interim Fix 3 Available for Download on IBM Fix Central
Sun, May 7th 2017 4:43p   Johnny Oldenburger
IBM Domino 9.0.1.Feature Pack 8 Interim Fix 3 is available for wownload on IBM Fix Central. Fix List updates in progress. Note: Domino 9.0.1 FP8 IF3 is a pre-req for Verse On-Premises 1.0.1. Download link: Interim Fix 2 for Domino 9.0.1 Feature Pack 8
11
IBM Domino 9.0.1.Feature Pack 8 Interim Fix 2 Available for Download on IBM Fix Central
Fri, Apr 21st 2017 6:40a   Johnny Oldenburger
IBM Domino 9.0.1.Feature Pack 8 Interim Fix 2 is available for wownload on IBM Fix Central. A vulnerability in the IBM Domino server IMAP EXAMINE command potentially could be exploited by an authenticated user resulting in a stack buffer overflow. This could allow a remote attacker to execute code with the privileges of the Domino server. Current 64-bit platforms leverage ASLR (Address Space Layout Randomization) which dramatically reduces the probability of rogue code execution. Conversely, Win
15
Panagenda ApplicationInsights for IBM Notes Domino - Transform the Bits and Bytes of your Notes Databases into Meaningful Information!
Wed, Apr 12th 2017 12:20p   Johnny Oldenburger
Starting April 11, 2017, customers who are current on IBM Software Subscription and Support (S&S) for Domino Enterprise Server, Utility Server, or Dual Entitlement with Applications will be entitled to panagenda ApplicationInsights at no cost. See below for important details pertaining to this offering. ApplicationInsights is an offering from panagenda that allows customers to get a detailed analysis of their application landscape in IBM Domino. ApplicationInsights provides key analysis to
9
Notes 9.0.1 Feature Pack 8 Interim Fix 1 Available for Download on IBM Fix Central
Mon, Apr 10th 2017 5:17a   Johnny Oldenburger
Notes 9.0.1 Feature Pack 8 Interim Fix 1 is available for download from IBM Fix Central. Below the Fix List. Notes 9.0.1 Feature Pack 8 Interim Fix 1 can be downloaded through this link.
15
IBM NewWayToLearn 2017 starting April 17th
Mon, Apr 3rd 2017 9:11a   Johnny Oldenburger
New Way to Learn is a comprehensive program of enablement for IBM Business Partners to get the skills and experience they need to be successful delivering, supporting and designing solutions on IBM's Collaboration Solutions platforms. In addition to the more than two hundred sessions delivered in 2015 and 2016 there will be another 122 sessions starting on 17th April. For more information: NewWayToLearn is coming by Alan Hamilton. Last year I participated as an IBM Champion to this great IB
8
Replay IBM Presents the IBM Notes Domino Roadmap and a Deep Dive into Feature Pack 8
Thu, Mar 30th 2017 9:04p   Johnny Oldenburger
On March 28th a very interesting webinar was organized by T.L.C.C and Team Studio, IBM Presents the Notes/Domino Roadmap and a Deep Dive into Feature Pack 8, by Barry Rosen (IBM), Adam Kesner (IBM), Martin Donnelly (IBM) and Brian Gleeson (IBM). For those who missed this webinar below the content, slides and video. This webinar encompasses two sessions presented at IBM Connect 2017. Adam Kesner and Barry Rosen from IBM review the latest updates on Notes/Domino and discuss the future directions a
8
SSJS Editor intermittently fails to open in Domino Designer 9.0.1 Feature Pack 8
Fri, Mar 17th 2017 5:48p   Johnny Oldenburger
In case you missed it, there is a problem in the Domino Designer after installing Feature Pack 8. Below the description of IBM Support. An intermittent problem has been introduced in Domino Designer 9.0.1 Feature Pack 8 that causes a failure when opening the SSJS editor. This problem affects only applications that contain a managed bean. This issue is being tracked as SPR LHEYAKBJSQ. As a workaround, users can perform a full clean/rebuild of the application and then use the SSJS editor. Note: T
10
IBM New Way to Learn 2017 - Installing Browser Dependencies in XPages Applications
Tue, Mar 14th 2017 6:59p   Johnny Oldenburger
New Way to Learn is a comprehensive program of enablement for IBM Business Partners to get the skills and experience they need to be successful delivering, supporting and designing solutions on IBM's Collaboration Solutions platforms. Last year I participated as an IBM Champion to this great IBM program with a webinar on Bootstrap Plugins in XPages. This year I will return with a session on installing browser dependencies in XPages Applications using Node, Git Source Tree and bower / bower inst
11
IBM Presents the IBM Notes Domino Roadmap and a Deep Dive into Feature Pack 8
Tue, Mar 14th 2017 6:55p   Johnny Oldenburger
On March 28th a very interesting webinar will be organized by T.L.C.C and Team Studio, IBM Presents the Notes/Domino Roadmap and a Deep Dive into Feature Pack 8, by Barry Rosen (IBM), Adam Kesner (IBM), Martin Donnelly (IBM) and Brian Gleeson (IBM). The registration for this webinar is not yet available on the T.L.C.C website. Content Webinar Join us as IBM presents the plan for IBM Notes and Domino. This webinar will encompass two sessions presented at IBM Connect 2017! Adam Kesner and Barry




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