203 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Replay Webinar IBM JUMP Session: IBM Cloud Email Statistics
Fri, Nov 17th 2017 111
IBM Traveler 9.0.1.20 Available for Download on IBM Fix Central including Technote Support Feature Pack 10
Wed, Nov 15th 2017 42
Quick Tip: Read Text File - Compare View Values - Send Email Using LotusScript
Wed, Nov 15th 2017 32
Update Readers and Authors Fields Using LotusScript - Adding New Values
Tue, Nov 14th 2017 19
A Brief Reprieve - IBM Champion Nomination Period Extended
Mon, Nov 13th 2017 22
Replay Webinar IBM JUMP Session: IBM Domino Applications on Cloud
Sun, Nov 12th 2017 18
My IBM Champion Nominations for IBM Collaboration Solutions - Only a Few Days Left!
Thu, Nov 9th 2017 5
Top 10
Replay Webinar IBM JUMP Session: IBM Cloud Email Statistics
Fri, Nov 17th 2017 111
IBM Traveler 9.0.1.20 Available for Download on IBM Fix Central including Technote Support Feature Pack 10
Wed, Nov 15th 2017 42
Quick Tip: Read Text File - Compare View Values - Send Email Using LotusScript
Wed, Nov 15th 2017 32
IBM Domino and IBM Notes 9.0.1 FP7 available for download on IBM Fix Central
Tue, Sep 13th 2016 24
A Brief Reprieve - IBM Champion Nomination Period Extended
Mon, Nov 13th 2017 22
Using the Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages
Wed, Jun 3rd 2015 20
Using Bootstrap Dual Listbox a Responsive Dual Listbox Widget in XPages
Wed, Oct 12th 2016 20
Update Readers and Authors Fields Using LotusScript - Adding New Values
Tue, Nov 14th 2017 19
Replay Webinar IBM JUMP Session: IBM Domino Applications on Cloud
Sun, Nov 12th 2017 18
Select2 maximumSelectionSize
Tue, Nov 25th 2014 15


Using Bootstrap Material DateTimePicker in XPages
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
   


For a new XPages application I was looking for a simple DateTime Picker. In my search I came accross the Bootstrap Material DateTimePicker plugin. The Material DateTimePicker was originaly designed for Bootstrap Material, the V2.0 is now completely standalone and responsive. Bootstrap Material DateTime Picker relies on Bootstrap, jQuery, Google Material Icon Font and Moment.js.
In order to use the Bootstrap Material DateTimePicker plugin, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Bootstrap Material DateTimePicker.

Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example a Folder bootstrapmaterialdatetimepicker has been added in the WebContent Folder.
Next the JavaScript and CSS files, bootstrap-material-datetimepicker.js, moment.js and bootstrap-material-datetimepicker.css must be included on the XPage or Custom Control. In this example I add the files to an XPage. I also added the link for the fonts.

<script type="text/javascript" src="bootstrapmaterialdatetimepicker/moment.js"></script>
<script type="text/javascript" src="bootstrapmaterialdatetimepicker/js/bootstrap-material-datetimepicker.js"></script>
<link rel="stylesheet" href="bootstrapmaterialdatetimepicker/css/bootstrap-material-datetimepicker.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

AMD Loader Fix
For using Moment in XPages there is a need for an AMD Loader Fix. Reason: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages. In the example below I use two javascript libraries, disable_amd.js and enable_amd.js, a solution provided by Mark Leussink. You can add these scripts to in the Script Libraries of the XPages application.

disable_amd.js
if (typeof define === 'function' && define.amd) {if(define.amd.vendor =='dojotoolkit.org'){define._amd = define.amd;delete define.amd;}}

enable_amd.js
if (typeof define === 'function' && define._amd) {define.amd = define._amd; delete define._amd;}

The first one is loaded before the moments.js files, the second one after the moments.js files.

<script type="text/javascript" src="disable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="bootstrapmaterialdatetimepicker/moment.js"></script>
<script type="text/javascript" src="enable_amd.js" clientSide="true"></script>

Note: There are other solutions for the AMD Fix. For more information about these solutions see my blog post Bootstrap Plugins in XPages Part VI - jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2).

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin. The XSnippet can be added to the Script Libraries. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).bootstrapMaterialDatePicker({
weekStart : 0,
format : 'DD-MM-YYYY',
time: false
});    
})
]]></xp:this.value>
</xp:scriptBlock>

Final Result 
The final result is a good looking responsive DateTimePicker with some additional options in the initial setup.



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.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="disable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="bootstrapmaterialdatetimepicker/moment.js"></script>
<script type="text/javascript" src="enable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="bootstrapmaterialdatetimepicker/js/bootstrap-material-datetimepicker.js"></script>
<link rel="stylesheet" href="bootstrapmaterialdatetimepicker/css/bootstrap-material-datetimepicker.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).bootstrapMaterialDatePicker({
weekStart : 0,
format : 'DD-MM-YYYY',
time: false
});    
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText2}" ).bootstrapMaterialDatePicker({
weekStart : 0,
date: false,
format : 'HH:mm'
});    
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="col-md-7">
<h3>Bootstrap Material DateTime Picker</h3>
<h5>
Bootstrap Material DateTime Picker relies on Bootstrap, jQuery, Google Material Icon Font and Moment.js.
</h5>
</div>
<div class="col-md-7">
<xp:inputText id="inputText1"></xp:inputText>
</div>
<xp:br></xp:br>
<xp:br></xp:br>
<div class="col-md-7">
<xp:inputText id="inputText2"></xp:inputText>
</div>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Bootstrap Material DateTimePicker examples.

---------------------
http://xpagesandmore.blogspot.com/2017/09/using-bootstrap-material-datetimepicker.html
Sep 01, 2017
8 hits



Recent Blog Posts
111
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
42
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
32
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
19
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
22
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
18
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
5
My IBM Champion Nominations for IBM Collaboration Solutions - Only a Few Days Left!
Thu, Nov 9th 2017 2:57p   Johnny Oldenburger
This week is the final week to nominate, among others, an IBM Champion for IBM Collaboration Solutions (ICS). In this blog post I will not give a complete summary of my IBM Champion nominations but only of those who have made, in my opinion, a 'significant contribution' to the community during the past year. As I mentioned in my previous blog post, Become an IBM Champion - My Thoughts And Considerations, it was not as easy as the last few years. This year I looked and interpreted the terms to
8
Comparing, Replacing and Restoring Design Elements with Local History using the Text Compare Editor in Domino Designer
Thu, Nov 9th 2017 10:37a   Johnny Oldenburger
Last week something went completely wrong with some resources (design elements) in a modified design of an XPages application. Luckily Domino Designer has a very powerful feature, Local History. A standard Eclipse functionality of extremely great value. By using the Compare, Replace and Restore Resources functions with Local History using the Text Compare Editor the problems were quickly resolved. Below is a brief description of this very powerful feature in the Domino Designer. A local edit hi
7
Webinar - IBM JUMP Session: IBM Domino Applications on Cloud
Tue, Nov 7th 2017 12:57p   Johnny Oldenburger
There will be a very interesting IBM Jump Session on 8 November, IBM Domino Applications on Cloud. JUMP stands for Join, Understand, Master and Participate. Content Topic: IBM Domino Applications on Cloud Date: Wednesday, November 8, 2017 Time: 10:00 AM EST (15:00 UTC/GMT, UTC-5 hours) for 60 minutes 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, av
11
Responsive and Highly Customizable Messageboxes in XPages Using the jQuery Lobibox Plugin
Tue, Nov 7th 2017 12:56p   Johnny Oldenburger
Last week I blogged about the jQuery LobiPanel Plugin, Extended Bootstrap Panels in XPages Using the jQuery LobiPanel Plugin and the jQuery Lobibox Plugin, Create Responsive and Highly Customizable Notifications in XPages Using the jQuery Lobibox Plugin. As I mentioned in these blog posts, Lobibox is devided into two parts, Messageboxes and Notifications. In this blog post I will describe the Messageboxes part. Lobibox is very easy to implement in any XPages application. Features Messageboxes L




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