202 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Domino 2025 Virtual Jams - The Next Chapter Begins
Thu, Dec 7th 2017 305
Search Terms and Design Complexity: A Tutorial Before Modernizing or Migrating
Thu, Dec 7th 2017 96
Webinar - IBM JUMP Session: IBM Domino Applications on Cloud
Tue, Dec 5th 2017 26
Save Domino Document Changes in MongoDB
Thu, Nov 30th 2017 25
Replay Webinar IBM JUMP Session: IBM Cloud Email Statistics
Fri, Nov 17th 2017 11
IBM Traveler 9.0.1.20 Available for Download on IBM Fix Central including Technote Support Feature Pack 10
Wed, Nov 15th 2017 11
Quick Tip: Read Text File - Compare View Values - Send Email Using LotusScript
Wed, Nov 15th 2017 10
Top 10
Domino 2025 Virtual Jams - The Next Chapter Begins
Thu, Dec 7th 2017 305
Search Terms and Design Complexity: A Tutorial Before Modernizing or Migrating
Thu, Dec 7th 2017 96
IBM Domino and IBM Notes 9.0.1 FP7 available for download on IBM Fix Central
Tue, Sep 13th 2016 32
Webinar - IBM JUMP Session: IBM Domino Applications on Cloud
Tue, Dec 5th 2017 26
Save Domino Document Changes in MongoDB
Thu, Nov 30th 2017 25
Using the Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages
Wed, Jun 3rd 2015 24
IBM Client Application Access 1.0.1 (ICAA) Enhancements
Sun, Jun 26th 2016 22
IBM Notes Domino 9.0.1 Fix Pack 5 Released
Mon, Nov 30th 2015 18
Using a Bootstrap Multiselect List Box in XPages
Thu, May 14th 2015 17
Using Bootstrap Dual Listbox a Responsive Dual Listbox Widget in XPages
Wed, Oct 12th 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
25 hits



Recent Blog Posts
305
Domino 2025 Virtual Jams - The Next Chapter Begins
Thu, Dec 7th 2017 2:49p   Johnny Oldenburger
IBM's strategic partnership with HCL is a step towards bringing a robust and exciting roadmap for Notes Domino version 10 and beyond to increase commitment and deliver a major release in 2018. This 90 minute interactive virtual jam will give you a chance to share your thoughts on the Domino V10 roadmap including Application Development, Mail, Chat and Meetings. We want to ensure we get both qualitative and quantitative insights into the formulation of the roadmap and product vision and your at
96
Search Terms and Design Complexity: A Tutorial Before Modernizing or Migrating
Thu, Dec 7th 2017 2:40p   Johnny Oldenburger
There will be a very interesting webinar on December 13, Search Terms and Design Complexity: A Tutorial Before Modernizing or Migrating organized by Teamstudio. Content Topic: Search Terms and Design Complexity: A Tutorial Before Modernizing or Migrating Date: Wednesday, December 13, 2017 Time: 11 - 11:30 a.m. Boston time Are you preparing to modernize your IBM Notes and Domino applications or migrate off the platform? Notes and Domino have provided a lot of proprietary design concepts over th
26
Webinar - IBM JUMP Session: IBM Domino Applications on Cloud
Tue, Dec 5th 2017 6:40a   Johnny Oldenburger
There will be a very interesting IBM Jump Session on 12 December, IBM Domino Applications on Cloud. JUMP stands for Join, Understand, Master and Participate. Content Topic: IBM Domino Applications on Cloud Date: Tuesday, December 12, 2017 Time: 10:00 PM EST (3:00 AM GMT, 12:00 PM JST) IBM Domino Applications on Cloud is a subscription service that offers IBM hosted solution for Domino Apps over IBM Bluemix Cloud. The service offers a structured and planned migration process, avoiding business
25
Save Domino Document Changes in MongoDB
Thu, Nov 30th 2017 10:08a   Johnny Oldenburger
Some of the great 'new' development products continue to develop and evolve within the IBM Notes Domino and XPages world. Some are free to use for others has to be paid. For some time I follow the developments of one of these products closely, ClevaDesk. 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
11
Replay Webinar IBM JUMP Session: IBM Cloud Email Statistics
Fri, Nov 17th 2017 7:23a   Johnny Oldenburger
On November 15 there was a very interesting IBM Jump Session, IBM Cloud Email Statistics. JUMP stands for Join, Understand, Master and Participate. The presentation, audio and video are now available on the IBM Support website. Content IBM Cloud Email Statistics is a SaaS offering, providing customers with a variety of data insights on the long term use of their IBM Cloud eMail services (IBM Verse, SCN) through an intuitive graphical dashboard. In this session you will be introduced to the offe
11
IBM Traveler 9.0.1.20 Available for Download on IBM Fix Central including Technote Support Feature Pack 10
Wed, Nov 15th 2017 6:05p   Johnny Oldenburger
Today IBM released IBM Traveler 9.0.1.20. IBM Traveler 9.0.1.20 is a maintenance release that provides new features and APAR fixes for the IBM Traveler server. The information below outlines the changes included. IBM Traveler 9.0.1.20 does not include a database schema update. However, if upgrading from a version prior to 9.0.1.15 and running MS SQL Server, or if upgrading from a version prior to 9.0.1.16 and running DB2 Server, action may be required if you manually manage your database schema
10
Quick Tip: Read Text File - Compare View Values - Send Email Using LotusScript
Wed, Nov 15th 2017 4:19p   Johnny Oldenburger
Today I was asked if it was possible using LotusScript to read a Text File, which was stored in a specific Folder on the system, subsequently perform a check, based on the Values in the Text File, or a Value in the Text File is present in a specific View in the NSF and finally place the found Values in a Folder in the NSF and send an email with the found Values in the Folder to a specific email address. The above can be solved easily by using LotusScript. Agent Read Text File To solve the above
6
Update Readers and Authors Fields Using LotusScript - Adding New Values
Tue, Nov 14th 2017 6:31a   Johnny Oldenburger
During the past months I have worked a lot with LotusScript. One of the questions I came accross was how to add a value to a Readers or Authors field in the UI document using LotusScript. First a little background information. In daily practice, I make extensive use of Userroles in the Access Control List which are assigned to specific User Groups in the Access Control List. Based on these Userroles document access is granted based on these Userroles in the Authors and Readers Fields in the spec
9
A Brief Reprieve - IBM Champion Nomination Period Extended
Mon, Nov 13th 2017 12:49p   Johnny Oldenburger
The period for the nominations for IBM Champion has been extended until 30 November! This is great news. The extension offers everyone the opportunity to submit their nominations for which the original deadline was too short. For me, this means that I can submit two more nominations for which I had no time left. Just great! Thanks for this opportunity. Read the blog post by Libby Ingrassia for more information. See also my previous blog post, Become an IBM Champion - My Thoughts And Consideratio
6
Replay Webinar IBM JUMP Session: IBM Domino Applications on Cloud
Sun, Nov 12th 2017 12:37p   Johnny Oldenburger
On November 8 there was a very interesting IBM Jump Session, IBM Domino Applications on Cloud. JUMP stands for Join, Understand, Master and Participate. The presentation, audio and video are now available on the IBM Support website. Content IBM Domino Applications on Cloud is a subscription service that offers IBM hosted solution for Domino Apps over IBM Bluemix Cloud. The service offers a structured and planned migration process, avoiding business disruptions. In this session you will be intro




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