twitter-bootstrap – xPages中的bootstrap 3的Eonasdan datetimepicker

如文档中所述,我已将插件和moment.js添加到数据库中,并使用示例代码here构建一个简单的演示页面.在数据库中我使用的是Bootstrap4XPages插件(March发行版),因此已经加载了Bootstrap 3.1.1.

<?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-datetiR_37_11845@epicker/js/bootstrap-datetiR_37_11845@epicker.min.js"
        clientSide="true">
    </xp:script>
    <xp:styleSheet
        href="eonasdan-datetiR_37_11845@epicker/css/bootstrap-datetiR_37_11845@epicker.min.css"></xp:styleSheet>
</xp:this.resources>

<xp:div
    xp:key="faCETR_37_11845@iddle">

    <p>
        This page uses&#160;
        <a
            href="https://github.com/Eonasdan/bootstrap-datetiR_37_11845@epicker">Eonasdan's Bootstrap datetiR_37_11845@ePicker</a>
        .
    </p>

    <div
        class="col-sm-6">
        <div
            class="form-group">
            <div
                class='input-group date'
                id='datetiR_37_11845@epicker1'>

                <xp:inputText
                    id="inputText1"
                    styleClass="form-control">
                    <xp:this.converter>
                        <xp:convertdatetiR_37_11845@e
                            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 () {
    $('#datetiR_37_11845@epicker1').datetiR_37_11845@epicker();
    });]]></xp:this.value>
</xp:scriptBlock>

</xp:view>

首次打开XPage在Chrome控制台中给出了一个熟悉的错误：

Uncaught TypeError: undefined is not a function

我之前见过一个：较新的jQuery插件尝试使用它的AMD加载器,但这与XPage中的Dojo实现不相符.我知道有两种解决方法：

>使用@L_502_3@在Dojo之前加载(JavaScript)资源.
>更改您正在使用的库的源代码.这种方法也不完美,但我喜欢的方法.在JavaScript@L_450_44@中(在本例中名为bootstrap-datetiR_37_11845@epicker.js),您需要找到确定它是否可以使用AMD加载程序的行.它们通常可以在JavaScript@L_450_44@的开头或结尾找到.

这是你在bootstrap-datetiR_37_11845@epicker.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-datetiR_37_11845@epicker requires jQuery to be loaded first';
    } else if (!moment) {
        throw 'bootstrap-datetiR_37_11845@epicker requires moment.js to be loaded first';
    } else {
        factory(jQuery,moment);
    }
}
}

然后我们禁用(或删除;您的选择)AMD部分：

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

现场演示可以在here找到.