Eonasdan datetimepicker for bootstrap 3 in xPages -

Eonasdan datetimepicker for bootstrap 3 in xPages -

i'm having problem bootstrap datetimepicker command in xpage application , suspect way xpages generates command id.

the next code works fine without id on inputtext element.

<script type="text/javascript" src="/fpath/jquery-min.js"></script> <script type="text/javascript" src="/fpath/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="/rfpath/bootstrap-datetimepicker-3.0.0/js/moment.min.js"></script> <script type="text/javascript" src="/fpath/bootstrap-datetimepicker-3.0.0/js/bootstrap-datetimepicker.min.js"></script> <div class='input-group date' data-datetimepicker="true"> <xp:inputtext styleclass="form-control timepicker"> <xp:this.converter> <xp:convertdatetime type="time" timestyle="short" /> </xp:this.converter> </xp:inputtext> <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span> </div>

as add together id in receive next error when clicking away/out of control:

error: syntax error, unrecognized expression: unsupported pseudo: _id1

the id required map info document not using attach datetimepicker - using class this:

$('.timepicker').each(function(i,el){shared.timepickeropen(el)}) shared = { timepickeropen: function(el){ $(el).datetimepicker({ pickdate: false, picktime: true, usecurrent: true, minutestepping:5 }); } }

update #1:

sounds there's bit of misunderstanding going on i'll seek explain further...

in testing, wrote code in pure html giving field id , works fine. if utilize xpage field (where domino generates id using colons) date picker fails error described above. i not utilize id bind event field, utilize class field bind datetimepicker command it.

the problem appears datetimepicker using field id. though obtain field through class name (not id) datetimepicker code seems want utilize id if 1 found in field. datetimepicker binds field without problems. when effort select time model box displays , allows select time, error occurs when seek click away field close model time control.

interesting plugin. created sample page see if can integrate xpage , if same error. after doing describe below got run without issues reported.

as described in docs, i've added plugin , moment.js database, , used sample code here build simple demo page. in database using bootstrap4xpages plugin (march release), bootstrap 3.1.1 loaded.

<?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="momentjs-2.7.0/moment.min.js" clientside="true"> </xp:script> <xp:script src="eonasdan-datetimepicker/js/bootstrap-datetimepicker.min.js" clientside="true"> </xp:script> <xp:stylesheet href="eonasdan-datetimepicker/css/bootstrap-datetimepicker.min.css"></xp:stylesheet> </xp:this.resources> <xp:div xp:key="facetmiddle"> <p> page uses&#160; <a href="https://github.com/eonasdan/bootstrap-datetimepicker">eonasdan's bootstrap datetimepicker</a> . </p> <div class="col-sm-6"> <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <xp:inputtext id="inputtext1" styleclass="form-control"> <xp:this.converter> <xp:convertdatetime type="both" timestyle="short" /> </xp:this.converter> </xp:inputtext> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </xp:div> <xp:scriptblock id="scriptblock1"> <xp:this.value><![cdata[$(function () { $('#datetimepicker1').datetimepicker(); });]]></xp:this.value> </xp:scriptblock> </xp:view>

opening xpage first time gave me familiar error in chrome's console:

uncaught typeerror: undefined not function

i've seen 1 before: newer jquery plugins seek utilize amd loader, doesn't play dojo implementation in xpages. there 2 workarounds know of:

use sven hasselbach's method load (javascript) resources before dojo. change source code of library you're using. method not perfect too, 1 prefer. in javascript file (in case named bootstrap-datetimepicker.js need find lines determine if can utilize amd loader. can found @ origin or end of javascript file.

here's code you're looking in bootstrap-datetimepicker.js:

; (function (factory) { if (typeof define === 'function' && define.amd) { // amd used - register anonymous module. define(['jquery', 'moment'], factory); } else { // amd not used - effort fetch dependencies scope. if (!jquery) { throw 'bootstrap-datetimepicker requires jquery loaded first'; } else if (!moment) { throw 'bootstrap-datetimepicker requires moment.js loaded first'; } else { factory(jquery, moment); } } }

we disable (or remove; choice) amd part:

; (function (factory) { //if (typeof define === 'function' && define.amd) { // amd used - register anonymous module. // define(['jquery', 'moment'], factory); //} else { // amd not used - effort fetch dependencies scope. if (!jquery) { throw 'bootstrap-datetimepicker requires jquery loaded first'; } else if (!moment) { throw 'bootstrap-datetimepicker requires moment.js loaded first'; } else { factory(jquery, moment); } //} }

a live demo can found here.

twitter-bootstrap xpages bootstrap-datetimepicker