198 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Using Bringins in XPages for Animated Info Pages
Wed, Oct 18th 2017 13
IBM Notes 9.0.1 Feature Pack 9 Interim Fix 1 Available for download on IBM Fix Central
Sat, Oct 14th 2017 137
Create Animated Progress Circles in XPage using Circliful
Fri, Oct 13th 2017 165
IBM Domino 9.0.1 Feature Pack 9 Interim Fix 2 Available on IBM Fix Central
Fri, Oct 13th 2017 222
IBM JUMP Session - The Connections Catalog: Integrating 3rd Party Apps For More Business Value
Fri, Oct 13th 2017 101
Using Smoke Form Validation And Components for Bootstrap in XPages Part 3 - Easy, Simple and Safer Form Validation
Thu, Oct 12th 2017 160
It's IBM Champion Season! Nominations are open!
Tue, Oct 10th 2017 93
Top 10
IBM Domino 9.0.1 Feature Pack 9 Interim Fix 2 Available on IBM Fix Central
Fri, Oct 13th 2017 222
Create Animated Progress Circles in XPage using Circliful
Fri, Oct 13th 2017 165
Using Smoke Form Validation And Components for Bootstrap in XPages Part 3 - Easy, Simple and Safer Form Validation
Thu, Oct 12th 2017 160
IBM Notes 9.0.1 Feature Pack 9 Interim Fix 1 Available for download on IBM Fix Central
Sat, Oct 14th 2017 137
IBM JUMP Session - The Connections Catalog: Integrating 3rd Party Apps For More Business Value
Fri, Oct 13th 2017 101
It's IBM Champion Season! Nominations are open!
Tue, Oct 10th 2017 93
IBM Domino and IBM Notes 9.0.1 FP7 available for download on IBM Fix Central
Tue, Sep 13th 2016 39
Using Bootstrap Dual Listbox a Responsive Dual Listbox Widget in XPages
Wed, Oct 12th 2016 21
Bootstrap Plugins in XPages Part IV - Awesome Bootstrap Checkbox
Mon, Apr 4th 2016 18
Using the Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages
Wed, Jun 3rd 2015 16


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



Recent Blog Posts
13
Using Bringins in XPages for Animated Info Pages
Wed, Oct 18th 2017 11:59a   Johnny Oldenburger
In my continuous search for modern plugins for my XPages applications I came across Bringins. Bringins is a jQuery plugin to show contents on a webpage as an animated page. These page will be positioned 'fixed' with scrollable data. You can have your custom CSS content to appear in the bringins pages. This plugin allows you to choose from three intoduction animations for the page whether to animate the page on the left, right or center of the webpage. The plugin also provides options to specif
137
IBM Notes 9.0.1 Feature Pack 9 Interim Fix 1 Available for download on IBM Fix Central
Sat, Oct 14th 2017 6:08p   Johnny Oldenburger
On October 10th IBM released IBM Notes Feature Pack 9 Interim Fix 1 on IBM Fix Central. Below an overview of the Fixes in this release. Download link: IBM Notes Client 9.0.1 FP9 Interim Fix 1 More information: IBM Fix Central See also my blog post IBM Domino 9.0.1 Feature Pack 9 Interim Fix 2 Available on IBM Fix Central.
165
Create Animated Progress Circles in XPage using Circliful
Fri, Oct 13th 2017 2:55p   Johnny Oldenburger
For a new XPages application one of the requirements was to present some specific project data in progress circles. In my search I came across Circliful. Circliful is a very easy to use jquery plugin for creating beautiful, responsive and highly customizable animated progress circles. Circliful show data as circle statistics, no images used and is based on SVG and jquery including many options which can be set. For the most simple use you only have to add an element on your XPage with a unique i
222
IBM Domino 9.0.1 Feature Pack 9 Interim Fix 2 Available on IBM Fix Central
Fri, Oct 13th 2017 11:04a   Johnny Oldenburger
Yesterday IBM released IBM Domino Feature Pack 9 Interim Fix 2 on IBM Fix Central. Below an overview of the Fixes in this release. Download link: IBM Domino 9.0.1 FP9 Interim Fix 2 For more information: IBM Fix Central
101
IBM JUMP Session - The Connections Catalog: Integrating 3rd Party Apps For More Business Value
Fri, Oct 13th 2017 6:35a   Johnny Oldenburger
There will be an interesting IBM Jump Session on 2 November, The Connections Catalog: Integrating 3rd Party Apps For More Business Value. JUMP stands for Join, Understand, Master and Participate. Content Topic: The Connections Catalog: Integrating 3rd Party Apps For More Business Value Date: Thursday, November 2, 2017 Time: 11:00 AM EDT (15:00 UTC/GMT, UTC-4 hours) for 60 minutes The new and improved Connections Cloud Catalog is the first step toward building an “app store” in the Pink wor
160
Using Smoke Form Validation And Components for Bootstrap in XPages Part 3 - Easy, Simple and Safer Form Validation
Thu, Oct 12th 2017 12:18p   Johnny Oldenburger
In my prevoius blog posts about Smoke, Using Smoke Form Validation And Components for Bootstrap in XPages Part 1 - Alerts and Using Smoke Form Validation And Components for Bootstrap in XPages Part 2 - Confirmation, I described how you can use the Smoke Components Alert and Conformation in an XPages application. In this blog post the first part of how you can use the Smoke Form Validation in an XPages application. In this blog post the validation of Empty-, Alphanumeric and Number Fields are de
93
It's IBM Champion Season! Nominations are open!
Tue, Oct 10th 2017 5:17a   Johnny Oldenburger
The IBM Champion program recognizes innovative thought leaders in the technical community -- and rewards these contributors by amplifying their voice and increasing their sphere of influence. An IBM Champion is an IT professional, business leader, developer, or educator who influences and mentors others to help them make best use of IBM software, solutions, and services. The IBM Champion program recognizes innovative thought leaders in the technical community. An IBM Champion is an IT professi
5
Upcoming Webinar - Gain Cognitive Insights and Build Scalable Cognitive Solution with the New IBM Watson Explorer
Sat, Sep 30th 2017 2:23p   Johnny Oldenburger
On October 19th, a very interesting webinar will be organized by IBM, Gain Cognitive Insights and Build Scalable Cognitive Solution with the New IBM Watson Explorer. Speakers are Nancy Hensley, Director Watson Explorer, Offering Management IBM and Tanmay Sinha, Offering Management Leader, Watson Explorer IBM. The new Watson Explorer offers completely new cognitive platform that allows you to apply the power of Machine Learning to unlock new patterns, trends, and cognitive insights from across a
4
IBM Notes Domino XPages Community - Extended And Expanding
Fri, Sep 29th 2017 4:29p   Johnny Oldenburger
As you may know, I am Moderator of the Google+ XPages Community. Together with the founder and owner of the Google+ XPages Community, Rob Bontekoe, my old XPages teacher, this community was founded some years ago. The primary goal of the community was and still is to promote XPages as a development tool and sharing information about IBM XPages, IBM Notes Domino and IBM XPages for Bluemix. Given recent developments we continue to expand our field of vision and we are also going to focus on other
8
IBM Domino Applications on Cloud (DAC)
Fri, Sep 29th 2017 2:19p   Johnny Oldenburger
In the IBM world developments are moving rapidly. After the release of IBM Watson Workspace this week IBM previously announced the availability of IBM Domino Application on Cloud (DAC) for October 2017 during the IBM Notes Domino Day 2017 in Tokyo. Today I looked around at what exactly Domino Applications on Cloud is and what the standard service features for application hosting are. Below is some general information, some useful links and a video with more some more information about DAC. Orga




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