Bootstrap Date Picker XPages

Question

I am trying to add a date picker to my site that has been "bootstraped". I am not using the DoJo picker or the native picker because of aesthetics. Here are the components that I am currently using:

http://bootstrap4xpages.openntf.org/ => installed and working perfectly
bootstrap date picker: http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=dd.mm.yyyy&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox => This was installed by coping the .js and .css files into the database.
I have read through (and understood I think) Marky's blog entry: http://xomino.com/2012/01/26/using-jquery-selectors-in-xpages/

My problem is that no matter what I do I cannot get jQuery to add the .datepicker element to my field. I have tried both Marky's function, using a class name as the selector and just entering it directly. Does anybody have an idea what I am doing wrong?

Thank you in advance Ursus

PS: I would like to add that this is the first time I am using jQuery and bootstrap so be easy on me :o)

Here is the code:

=================== xPage =================

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex" xmlns:xc="http://www.ibm.com/xsp/custom">
    <xp:this.resources>
        <xp:script src="/bootstrap-datepicker.js" clientSide="true"></xp:script>
        <xp:styleSheet href="/datepicker3.css"></xp:styleSheet>
        <xp:script src="/jsTestBootstrap.js" clientSide="true"></xp:script>
    </xp:this.resources>
    <xp:panel
        style="margin-left:10.0px;margin-right:10.0px;margin-top:10.0px;margin-bottom:10.0px">
        <xp:div>
            <div class="row">
                <div class="col-xs-12">
                    <xp:label value="Select a date" id="label1" for="inputText1"></xp:label>
                    <xp:inputText id="inputText1" styleClass="jqDateField">
                    </xp:inputText>
                </div>
            </div>
        </xp:div>
    </xp:panel>
</xp:view>

===================== and here my clientSide code to select the field ==============

$("#view\\:_id1\\:inputText1").datepicker({
    format: "dd.mm.yyyy"
});

====================== end =========================================================

Try using the X$ function from this post: xomino.com/2012/03/09/x-reference-examples It works very well so your code would look like x$(“#{id:inputText1}”).datepicker({format: "dd.mm.yyyy"}); — Steve Zavocki
Have you tried a class selector? $(".jqDateField") - use a classSelector and save yourself some heartache One other thing you could try and look at it the z-index of the date picker - is it being created and not visible? I had that issue with jQueryUI date picker - was working but not visible. Use firebug to see if the selector works. — MarkyRoden
@MarkyRoden: yes, I tried the class selector but it still didn't work. The field is being created and is visible! Spent all afternoon with firebug :o) I even had a work colleague look at it who does a lot of bootstrap and AngularJS (spelling?) - he couldn't find my error either — Ursus Schneider
@SteveZavocki: I have tried that numerous times - I added Marks code in a jsLibrary then added your code (the " seemed to get a mixed up - this is what I am using: x$("#{id:inputText1}").datepicker({format: "dd.mm.yyyy"});) - I then get the following error in the console: Error: Syntax error, unrecognized expression: ##{id\:inputText1} — Ursus Schneider
Here is an actual code example that works: x$("#{id:inputHidden1}").val(formattedDate); Perhaps the formatting is set in a different way, I am using datepick.js, and I set the formatting in the panel and it works correctly. — Steve Zavocki

Frank van der Linden Frank van der Linden · Accepted Answer · 2014-07-16T16:55:33

See my blog post, http://elstarit.nl/?p=118. There I use different one, but I like it a lot because it has a date picker and time picker in one. But back to your JQuery problem. Do you know which version of JQuery is needed? Last week I banged my head against the wall, because in Bootstrap4XPages JQuery 1.8.x is loaded and my plugin required a newer version. After switching of Bootstrap4XPages and loaded JQuery by myself the problem was fixed.

Bootstrap Date Picker XPages

2 Answers