191 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Been to IBM Connect Before? Inhi Cho Invites You to Come Back!
Tue, Jan 17th 2017 75
Aveedo 4.0 - Migration Of Existing Domino Applications Including Watson - Twitter - Google
Fri, Jan 13th 2017 188
Bootstrap 4 Alpha 6 Released
Fri, Jan 6th 2017 24
IBM Verse On Premises (VOP) Configuration and User Documentation
Fri, Jan 6th 2017 33
IBM Connect 2017: Redefine Work with Watson
Thu, Jan 5th 2017 15
IBM New Way to Learn 2017
Wed, Jan 4th 2017 6
Replay XPages Webinar - Marty, You're Just Not Thinking Fourth Dimensionally
Thu, Dec 15th 2016 2
Top 10
Aveedo 4.0 - Migration Of Existing Domino Applications Including Watson - Twitter - Google
Fri, Jan 13th 2017 188
Been to IBM Connect Before? Inhi Cho Invites You to Come Back!
Tue, Jan 17th 2017 75
IBM Domino and IBM Notes 9.0.1 FP7 available for download on IBM Fix Central
Tue, Sep 13th 2016 40
IBM Verse On Premises (VOP) Configuration and User Documentation
Fri, Jan 6th 2017 33
Bootstrap 4 Alpha 6 Released
Fri, Jan 6th 2017 24
Using the Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages
Wed, Jun 3rd 2015 15
IBM Connect 2017: Redefine Work with Watson
Thu, Jan 5th 2017 15
Select2 maximumSelectionSize
Tue, Nov 25th 2014 12
Notes Domino 9.0.2 and Notes Domino 9.0.1 Fix Pack 7
Sat, Jul 30th 2016 11
IBM Client Application Access 1.0.1 (ICAA) Enhancements
Sun, Jun 26th 2016 7


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
75
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
188
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
24
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
33
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
15
IBM Connect 2017: Redefine Work with Watson
Thu, Jan 5th 2017 2:50p   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
6
IBM New Way to Learn 2017
Wed, Jan 4th 2017 6:47p   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. I have already signed up for the 2017 program. New Way to Learn will return on April 17th 2017 with a full curriculum of enablement on sales, tech
2
Replay XPages Webinar - Marty, You're Just Not Thinking Fourth Dimensionally
Thu, Dec 15th 2016 10:57p   Johnny Oldenburger
On December 13th a very interesting webinar was organized by T.L.C.C and Team Studio, Marty, You're Just Not Thinking Fourth Dimensionally by IBM Champion Paul Withers. For those who missed this webinar below the content, slides and video. Content Webinar When XPages code doesn't work as expected it is often because the expectation was wrong. With the various phases of the XPages lifecycle, validation, the various event handler settings, embedding Server-Side JavaScript within Client-Side Jav
1
Second Time IBM Champion 2017 for Collaboration Solutions (ICS)!
Thu, Dec 15th 2016 7:33a   Johnny Oldenburger
Yesterday IBM announced the IBM 2017 Champions for Collaboration Solutions (ICS). For a complete overview of all IBM Champions see the IBM Announcement, Introducing the 2017 IBM Champions for ICS! My sincere congratulations to all IBM Champions ICS 2017! I would also like to thank everyone who nominated me for IBM Champion 2017. Thank you very much! This year I was selected for the second time as IBM Champion for Collaboration Solutions. Thank you IBM! I am humbled and grateful to be belong to t
2
Upcoming XPages Webinar: Marty, You're Just Not Thinking Fourth Dimensionally
Mon, Dec 12th 2016 7:48a   Johnny Oldenburger
Tomorrow a very interesting webinar will be organized by T.L.C.C and Team Studio, Marty, You're Just Not Thinking Fourth Dimensionally by IBM Champion Paul Withers. The registration for this webinar is available on the T.L.C.C website. Content Webinar When XPages code doesn't work as expected it is often because the expectation was wrong. With the various phases of the XPages lifecycle, validation, the various event handler settings, embedding Server-Side JavaScript within Client-Side JavaSc
0
Quick XPages Tip: Responsive Videos using the YouTube IFrame Player API and CSS in XPages
Fri, Dec 9th 2016 12:08p   Johnny Oldenburger
This past week I was asked to embed a video on a XPages in which the sound had to be muted when the XPages was opened and the video played automatically. Given the default option 'volume = 0' no longer works in case an iframe is used (see example below), I decided to use the YouTube IFrame Player API including a CSS file in this specific case. Below an example of the use of the YouTube IFrame Player API in a XPage. Basic setup YouTube IFrame Player API with some additional options func




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