Eonasdan datetimepicker for bootstrap 3 in xPages

Question

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 f

Answer 1

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.

    
    
    
    
    




    

        This page uses 
        Eonasdan's Bootstrap DateTimePicker
        .
    

    

        

            


                
                    
                        
                    
                
                
                    
                
            
        
    





    

Opening the XPage for the first time gave me a familiar error in Chrome's console:

Uncaught TypeError: undefined is not a function

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:

1. Use Sven Hasselbach's method to load the (JavaScript) resources before Dojo.
2. Change the source code of the library you're using. This method is not perfect too, but the one I prefer. In the JavaScript file (in this case named 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:

; (function (factory) {
if (typeof define === 'function' && define.amd) {
    // AMD is used - Register as an anonymous module.
    define(['jquery', 'moment'], factory);
} else {
    // AMD is not used - Attempt to fetch dependencies from scope.
    if (!jQuery) {
        throw 'bootstrap-datetimepicker requires jQuery to be loaded first';
    } else if (!moment) {
        throw 'bootstrap-datetimepicker requires moment.js to be loaded first';
    } else {
        factory(jQuery, moment);
    }
}
}

We then disable (or remove; your choice) the AMD part:

; (function (factory) {
//if (typeof define === 'function' && define.amd) {
    // AMD is used - Register as an anonymous module.
//    define(['jquery', 'moment'], factory);
//} else {
    // AMD is not used - Attempt to fetch dependencies from scope.
    if (!jQuery) {
        throw 'bootstrap-datetimepicker requires jQuery to be loaded first';
    } else if (!moment) {
        throw 'bootstrap-datetimepicker requires moment.js to be loaded first';
    } else {
        factory(jQuery, moment);
    }
//}
}

A live demo can be found here.