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

如文档中所述,我已将插件和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-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>
        This 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>

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

Uncaught TypeError: undefined is not a function

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

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

这是你在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);
    }
}
}

然后我们禁用(或删除;您的选择)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-datetimepicker requires jQuery to be loaded first';
    } else if (!moment) {
        throw 'bootstrap-datetimepicker requires moment.js to be loaded first';
    } else {
        factory(jQuery,moment);
    }
//}
}

现场演示可以在here找到.