199 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Using Selectize for List Boxes and Combo Boxes in XPages
Fri, Jun 23rd 2017 135
Using SweetModal in XPages: Alert, Confirm, Prompt and Modal- Only Better!
Thu, Jun 22nd 2017 144
Using flatpickr a Lightweight and Powerful Datetime Picker in XPages
Wed, Jun 21st 2017 128
Replay IBM Notes Domino XPages Webinar - SmartNSF - 100% Smart - and in Color!
Tue, Jun 20th 2017 59
ApplicationInsights Quick Start Series
Tue, Jun 6th 2017 10
XPages Webinar: SmartNSF - 100% Smart - and in Color!
Mon, Jun 5th 2017 12
Domino and XPages Applications You Can Only Dream Of
Mon, Jun 5th 2017 9
Top 10
Using SweetModal in XPages: Alert, Confirm, Prompt and Modal- Only Better!
Thu, Jun 22nd 2017 144
Using Selectize for List Boxes and Combo Boxes in XPages
Fri, Jun 23rd 2017 135
Using flatpickr a Lightweight and Powerful Datetime Picker in XPages
Wed, Jun 21st 2017 128
Replay IBM Notes Domino XPages Webinar - SmartNSF - 100% Smart - and in Color!
Tue, Jun 20th 2017 59
IBM Domino and IBM Notes 9.0.1 FP7 available for download on IBM Fix Central
Tue, Sep 13th 2016 42
Using the Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages
Wed, Jun 3rd 2015 20
Notes Domino 9.0.2 and Notes Domino 9.0.1 Fix Pack 7
Sat, Jul 30th 2016 17
IBM Notes Domino 9.0.1 Feature Pack 8 Preliminary Fix List and New Features
Sat, Jan 28th 2017 17
IBM Notes Domino 9.0.1 Fix Pack 5 Released
Mon, Nov 30th 2015 16
IBM Client Application Access 1.0.1 (ICAA) Enhancements
Sun, Jun 26th 2016 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
21 hits



Recent Blog Posts
135
Using Selectize for List Boxes and Combo Boxes in XPages
Fri, Jun 23rd 2017 9:37a   Johnny Oldenburger
Selectize is the hybrid of a textbox and box. It's jQuery based and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc. It clocks in at around 7kb (gzipped). The goal is to provide a solid & usable user-experience with a clean and powerful API. Selectize is a lot like Chosen, Select2, and Tags Input but with a few advantages. In order to use Selectize, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The lates
144
Using SweetModal in XPages: Alert, Confirm, Prompt and Modal- Only Better!
Thu, Jun 22nd 2017 12:50p   Johnny Oldenburger
One of the requirements for a new XPages Project constisted of a lightweight and powerful Confirm, Alert, Prompt and Modal functionality. In my search I came across SweetModal, a lightweight and powerful jQuey Plugin. In order to use SweetModal, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: SweetModal. Below a basic example how SweetModal can be used in an XPages application. Adding the JS and CSS files The Ja
128
Using flatpickr a Lightweight and Powerful Datetime Picker in XPages
Wed, Jun 21st 2017 12:30p   Johnny Oldenburger
One of the requirements for a new XPages Project constisted of a lightweight and powerful Datetime Picker functionality. In my search I came across flatpickr, a lightweight and powerful Datetime Picker. Lean, UX-driven, and extensible, yet it doesn’t depend on any libraries. There’s minimal UI but many themes. Rich, exposed APIs and event system make it suitable for any environment. In order to use flatpickr, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. T
59
Replay IBM Notes Domino XPages Webinar - SmartNSF - 100% Smart - and in Color!
Tue, Jun 20th 2017 6:15a   Johnny Oldenburger
On June 13 th a very interesting webinar was organized by T.L.C.C and Team Studio, SmartNSF - 100% Smart - and in Color! by Christian Guedeman and Martin Jinoch. For those who missed this webinar below the content, slides and video. Content SmartNSF is one piece of the IBM Domino application modernization puzzle! Learn how you can turn a simple Domino database (NSF) to a smart microservice within minutes. If you are new to the world of REST APIs, Microservices, OpenApi Specification and YAML do
10
ApplicationInsights Quick Start Series
Tue, Jun 6th 2017 5:31a   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 this blog post 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 a
12
XPages Webinar: SmartNSF - 100% Smart - and in Color!
Mon, Jun 5th 2017 5:56p   Johnny Oldenburger
On Tuesday, June 13th (my Birthday) a very interesting webinar will be organized by T.L.C.C and Team Studio, SmartNSF - 100% Smart - and in color! by Christian Guedeman and Martin Jinoch. The registration for this webinar is available on the T.L.C.C website. Content Webinar SmartNSF is one piece of the IBM Domino application modernization puzzle! Learn how you can turn a simple Domino database (NSF) to a smart microservice within minutes. If you are new to the world of REST APIs, Microservices
9
Domino and XPages Applications You Can Only Dream Of
Mon, Jun 5th 2017 4:46p   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. ClevaDesk is a flexible IT-system with a set of business applications, a Designer to build IT-sys
9
Webinar Replay: Unlocking the Power of IBM Connections 6
Mon, Jun 5th 2017 4:28p   Johnny Oldenburger
On Wednesday, May 3 a very interesting webinar was organized by Maarga Systems, Unlocking the Power of IBM Connections 6.0. For those who missed this webinar below the content and the video. Content IBM has recently released the newest version of their Enterprise Collaboration Software – IBM Connections 6.0 that will bring new capabilities to Enterprise Social Networks for a simpler collaboration across the workforce and employee onboarding experience. IBM Connections 6.0 has new functionalit
6
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
11
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




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