I'm having a problem with the bootstrap dateTimePicker control in my xpage application and I suspect this is to do with the way xPages generates a control id.
The following code works fine without an id on the 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 soon as I add an id back in I receive the following error when clicking away/out of the control:
Error: Syntax error, unrecognized expression: unsupported pseudo: _id1
the id is required to map the data back to the document but I am not actually using it to attach the datetimepicker - I am using a class for 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 like there's a bit of misunderstanding going on so I'll try to explain further...
- In testing, I wrote the code in pure html giving the field an ID and it works fine.
- If I use an xpage field (where domino generates the ID using colons) the date picker fails with the error described above.
- I do not use the ID to bind the event to the field, I use a class get the field then bind the datetimepicker control to it.
The problem appears to be the datetimepicker using the field id. Even though I obtain the field through the class name (Not the id) the datetimepicker code seems to want to use an id if one is found in the field. The datetimepicker binds to the field without any problems. When you attempt to select a time the model box displays and allows you to select a time, the error occurs when you try to click away from the field to close the model time control.
You should never try to hard code the ID that Domino assigns to a particular element. If you need to use the ID to make something work, then this utility by Mark Roden works very well: http://xomino.com/2012/02/02/jquery-selector-function-for-xpages-xidinputtext1/
Also its dojo version: http://xomino.com/2012/02/28/x-update-for-dojo/
Just include this is a clientside script library, or reference directly using the script tag.
Interesting plugin. I created a sample page to see if I can get it to integrate with an XPage and if I get the same error. After doing what I describe below I got it to run without the issues you reported.
As described in the docs, I've added the plugin and moment.js to a database, and used the sample code here to build a simple demo page. In the database I am using the Bootstrap4XPages plugin (March release), so Bootstrap 3.1.1 is already loaded.
Opening the XPage for the first time gave me a familiar error in Chrome's console:
I've seen that one before: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages. There are 2 workarounds that I know of:
bootstrap-datetimepicker.js
you need to 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.Here's the code you're looking for in bootstrap-datetimepicker.js:
We then disable (or remove; your choice) the AMD part:
A live demo can be found here.