192 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
IBM Notes Tip: Prevent Pasting of Documents in Notes Views through LotusScript Agents
Tue, Feb 21st 2017 131
Building Web Interfaces for IBM Notes Domino Applications using ClevaDesk
Mon, Feb 20th 2017 103
New Features in IBM XPages 9.0.1 Social Edition Feature Pack 8
Thu, Feb 9th 2017 16
IBM Presents the Notes Domino Application Modernization Plan
Wed, Feb 1st 2017 6
IBM Notes Domino 9.0.1 Feature Pack 8 Preliminary Fix List and New Features
Sat, Jan 28th 2017 11
Going to IBM Connect 2017? Contact an IBMChampion for a discount!
Thu, Jan 19th 2017 6
Been to IBM Connect Before? Inhi Cho Invites You to Come Back!
Tue, Jan 17th 2017 7
Top 10
IBM Notes Tip: Prevent Pasting of Documents in Notes Views through LotusScript Agents
Tue, Feb 21st 2017 131
Building Web Interfaces for IBM Notes Domino Applications using ClevaDesk
Mon, Feb 20th 2017 103
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 17
New Features in IBM XPages 9.0.1 Social Edition Feature Pack 8
Thu, Feb 9th 2017 16
Using the Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages
Wed, Jun 3rd 2015 14
Bootstrap Plugins in XPages Part IV - Awesome Bootstrap Checkbox
Mon, Apr 4th 2016 14
IBM Client Application Access 1.0.1 (ICAA) Enhancements
Sun, Jun 26th 2016 13
iNotes 9.0.1 FP7 IF1 - Addresses "Formula Error" issue when accessing Domino 9.0.1 FP7 Available for Download on IBM Fix Central
Wed, Oct 5th 2016 13
IBM Notes Domino 9.0.1 Fix Pack 5 Released
Mon, Nov 30th 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
15 hits



Recent Blog Posts
131
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
103
Building Web Interfaces for IBM Notes Domino Applications using ClevaDesk
Mon, Feb 20th 2017 6:03a   Johnny Oldenburger
Great 'new' development products, tools and techniques continue to further develop and evolve within the IBM Notes Domino and XPages world. Some are free to use for others has to be paid. ClevaDesk is one of these amazing products which continues to evolve. ClevaDesk system expands IBM Notes Domino capabilities and gives it new life. There is no need to think about migrating to other technologies. Below a video about Clevadesk and what ClevaDesk is in short! ClevaDesk is a flexible IT-system w
16
New Features in IBM XPages 9.0.1 Social Edition Feature Pack 8
Thu, Feb 9th 2017 12:15p   Johnny Oldenburger
Recently I blogged about the IBM Notes Domino 9.0.1 Feature Pack 8 Preliminary Fix List and New Features. The Preliminary Fix List is now updated with new features for XPages. New Features in IBM® XPages ® 9.0.1 Social Edition Feature Pack 8 Document Encryption/Decryption on the Web Enables document encryption using secret or public/private keys in XPage applications. XPages Extension Library upgrade to latest OpenNTF release Introduces runtime support for RDBMS data sources and a Domino Des
6
IBM Presents the Notes Domino Application Modernization Plan
Wed, Feb 1st 2017 10:54a   Johnny Oldenburger
On March 7th a very interesting webinar will be organized by T.L.C.C and Team Studio, IBM Presents the Notes/Domino Application Modernization Plan, by Barry Rosen (IBM) and Adam Kesner (IBM). The registration for this webinar is not yet available on the T.L.C.C website. Content Webinar This webinar will focus on IBM's plans for the future of Domino as an application development platform. IBM's Barry Rosen and Adam Kesner will discuss IBM's plans for adding key functionality to Domino as wel
11
IBM Notes Domino 9.0.1 Feature Pack 8 Preliminary Fix List and New Features
Sat, Jan 28th 2017 2:10p   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 optional enabled to minimize risk. The same packaging, architecture and install kits used in previous fix packs remain in use for feature packs. The IBM Notes Domino Preliminary Fix List for Feature Pack 8 can be found here. Important NBP replaced with ICAA - There is no NBP (Notes Browser
6
Going to IBM Connect 2017? Contact an IBMChampion for a discount!
Thu, Jan 19th 2017 5:29p   Johnny Oldenburger
Are you planning to go this year to IBM Connect 2017. Please contact me or one of the other IBM Champions for a discount code of $100 ! You can add a comment to this blog post with your email address or send me an email (j.oldenburger@gmail.com) or contact one of the other IBM Champions. What do you have for this discount? Just contact me and ask for it! So do not be shy and contact me or one of the other IBM Champions, IBM Connect, the leading workplace technology conference, is moving to San
7
Been to IBM Connect Before? Inhi Cho Invites You to Come Back!
Tue, Jan 17th 2017 6:13a   Johnny Oldenburger
IBM Connect, the leading workplace technology conference, is moving to San Francisco, the center of the tech world. Learn how to harness fast-moving collaborative technologies in ways that will make your work easier. Gain invaluable insights in over 200 sessions, labs and countless learning and networking opportunities. Connect 2017 will offer a wide variety of session types for you to experience. Most session types will range between 20 – 45 minutes, featuring a presentation followed by a sho
9
Aveedo 4.0 - Migration Of Existing Domino Applications Including Watson - Twitter - Google
Fri, Jan 13th 2017 11:26a   Johnny Oldenburger
I follow the development of Aveedo (We4IT) for a considerable time. In recent months I have dedicated several blog posts on Aveedo, Assisted Migration Of Existing Domino Applications - Successfully Move Your Notes Application To The Browser and Build new XPages Applications and Modernize Existing Notes Databases without any XPages Skills. Aveedo is constantly evolving and I think Aveedo provides a great solution for multiple organizations to modernize existing IBM Notes Domino applications. Yest
7
Bootstrap 4 Alpha 6 Released
Fri, Jan 6th 2017 6:11p   Johnny Oldenburger
As everyone knows, I am a huge fan of Bootstrap in XPages and I follow the latest developments regarding the Bootstrap 4 Alpha releases closely. Today Bootstrap 4 Alpha 6 has been released. Below some major improvements from the releases note. Embracing Flexbox Bootstrap 4 is now flexbox by default! Flexbox is an immensely powerful layout tool, providing unparalleled flexibility (hah) and control to our grid system and core components. It comes at the cost of dropping IE9 support, but brings s
11
IBM Verse On Premises (VOP) Configuration and User Documentation
Fri, Jan 6th 2017 2:30p   Johnny Oldenburger
As everyone knows IBM has released IBM Verse on Premises (VOP). Up to this moment there is unfortunately limited documentation available. Below are the currently available configuration and user documentation. If someone has more documentation on IBM Verse on Premises please let me know. IBM Verse On-Premises 1.0 User Documentation Get ready for mail that understands you, for less clutter and more clarity, for getting connected you to the people who matter to you most. Designed for mobile devic




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