193 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
SSJS Editor intermittently fails to open in Domino Designer 9.0.1 Feature Pack 8
Fri, Mar 17th 2017 37
IBM New Way to Learn 2017 - Installing Browser Dependencies in XPages Applications
Tue, Mar 14th 2017 17
IBM Presents the IBM Notes Domino Roadmap and a Deep Dive into Feature Pack 8
Tue, Mar 14th 2017 25
XPages Tip: Hide Elements from Printing on an XPage using CSS
Tue, Mar 14th 2017 10
IBM Notes Tip: Export Data to Excel (CSV) using LotusScript Agents
Mon, Mar 13th 2017 11
IBM Open Mic Webcast: IBM Domino Application Development Update
Mon, Mar 13th 2017 10
IBM Notes Domino Feature Pack 8 Available for Download from IBM Fix Central
Tue, Mar 7th 2017 14
Top 10
IBM Domino and IBM Notes 9.0.1 FP7 available for download on IBM Fix Central
Tue, Sep 13th 2016 52
SSJS Editor intermittently fails to open in Domino Designer 9.0.1 Feature Pack 8
Fri, Mar 17th 2017 37
Using the Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages
Wed, Jun 3rd 2015 29
IBM Presents the IBM Notes Domino Roadmap and a Deep Dive into Feature Pack 8
Tue, Mar 14th 2017 25
IBM Notes Domino 9.0.1 Fix Pack 5 Released
Mon, Nov 30th 2015 19
IBM Client Application Access 1.0.1 (ICAA) Enhancements
Sun, Jun 26th 2016 19
IBM Notes Domino 9.0.1 Feature Pack 8 Preliminary Fix List and New Features
Sat, Jan 28th 2017 19
IBM New Way to Learn 2017 - Installing Browser Dependencies in XPages Applications
Tue, Mar 14th 2017 17
Using a Bootstrap Multiselect List Box in XPages
Thu, May 14th 2015 14
Bootstrap 4 Alpha 6 Released
Fri, Jan 6th 2017 14


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



Recent Blog Posts
37
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
17
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
25
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
10
XPages Tip: Hide Elements from Printing on an XPage using CSS
Tue, Mar 14th 2017 6:37p   Johnny Oldenburger
For an XPages project I was asked whether it was possible to print only the viewPanel on an XPage and not all other elements such as an iframe and a widgetContainer by making use of a print button with a simple window.print() function. A good practice in this case is to use a style sheet specifically for printing and and set it's media attribute to print. Using the CSS @media rule it is very easy to initially add a class 'no-print' with display:none !important. This class can then be used
11
IBM Notes Tip: Export Data to Excel (CSV) using LotusScript Agents
Mon, Mar 13th 2017 9:55a   Johnny Oldenburger
During the past period I received several questions how to export all Notes data corresponding to a specific Notes Form to Excel (CSV) using a LotusScript Agent. In the example below a possible solution to export all data associated with a specific Notes Form to Excel using a LotusScript agent. In the second example a possible solution to export all data from all forms in the Notes database to Excel using a LotusScript agent. For each form a separate Excel file will be created. A. LotusScript A
10
IBM Open Mic Webcast: IBM Domino Application Development Update
Mon, Mar 13th 2017 6:17a   Johnny Oldenburger
On March 21 there will be a webcast about the IBM Domino Application Development Update. Abstract This presentation will focus on IBM's plans for the future of Domino as an application development platform. We will discuss IBM's plans for adding key functionality to Domino as well as ways to allow customers to modernize their applications for use via web and mobile devices. This presentation is key for anybody who uses Domino as an application development platform and is interested in moderni
14
IBM Notes Domino Feature Pack 8 Available for Download from IBM Fix Central
Tue, Mar 7th 2017 6:18p   Johnny Oldenburger
Today IBM has released IBM Domino and IBM Notes FP8 on IBM Fix Central. 9.0.1 Feature Pack 8 is a collection of new features and low-risk, high-impact fixes to help customers safely avoid known issues. IBM strongly recommends that customers running Notes/Domino 9.0.1x upgrade to this latest Fix Pack since it adds new features and addresses a small percentage of defects that impact the broadest set of customers. Fix Packs are released periodically to provide a greater level of stability for custo
7
IBM Open Mic Webcast - What's new in Notes & Domino 9.0.1 FP8?
Thu, Mar 2nd 2017 6:58p   Johnny Oldenburger
On April 15th there will be a webcast about What's new in Notes & Domino 9 FP8? Abstract A discussion of the new features in Feature Pack 8 with the developers responsible for the release and contacts in support. After a presentation, attendees will be given an opportunity to ask our panel of experts questions. Throughout the event, attendees will also be encouraged to comment or ask questions in the IBM Connections Meetings Web chat. Follow us on Twitter @IBM_ICSsupport. Content Topic: W
11
Modernizing IBM Domino Applications with Sapho
Fri, Feb 24th 2017 3:00p   Johnny Oldenburger
At present, there exist a number of "tools" for modernizing IBM Domino Applications. Through the blog post 'IBM Connect 2017 #3: I’ve Seen The Future of Domino and it is Sapho'. I found out that in addition to the existing tools also Sapho is available for the modernization of existing Domino applications. Sapho’s deep integration with IBM Domino allows IT to build micro apps that interact with Domino databases and business logic. Domino databases contain a treasure trove of enterprise
7
IBM Notes Tip: Prevent Pasting of Documents in Notes Views through LotusScript Agents
Tue, Feb 21st 2017 6:00a   Johnny Oldenburger
Last week I was asked to ensure through LotusScript Agents that users no longer have the possibility to paste documents in the Notes Views within a specific Notes Database. As always there are several ways to achieve this. In the following I created two LotusScript Agents which ensure that pasting of documents in all views within the specific Notes database no longer is possible. All pasted documents will be immediately removed by the Agents. A. Agent Delete Pasted Documents Option Public Sub I




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