用于xPages中bootstrap 3的Eonasdan datetimepicker

Question

我在我的xpage应用程序中遇到了bootstrap dateTimePicker控件的问题,我怀疑这与xPages生成控件ID的方式有关.

以下代码在inputText元素上没有id时工作正常.

<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> 

一旦我添加了一个id,我在单击远离/退出控件时收到以下错误:

错误:语法错误,无法识别的表达式:unsupported pseudo:_id1

id是需要将数据映射回文档但我实际上并没有使用它来附加datetimepicker - 我正在使用一个类:

$('.timePicker').each(function(i,el){SHARED.timePickerOpen(el)}) 

SHARED = {
    timePickerOpen: function(el){
        $(el).datetimepicker({
            pickDate: false,
            pickTime: true,
            useCurrent: true,
            minuteStepping:5  
        });
    }
}

更新#1:

听起来有点误会,所以我会试着进一步解释......

• 在测试中,我用纯html编写代码,给字段一个ID,它工作正常.
• 如果我使用xpage字段(domino使用冒号生成ID),日期选择器将失败,并显示上述错误.
• 我不使用ID将事件绑定到字段,我使用类获取字段然后将datetimepicker控件绑定到它.

问题似乎是使用字段ID的datetimepicker.即使我通过类名(不是id)获取字段,datetimepicker代码似乎想要在字段中找到一个id.datetimepicker绑定到该字段没有任何问题.当您尝试选择模型框显示的时间并允许您选择时间时,当您尝试单击该字段以关闭模型时间控件时会发生错误.

Answer 1

有趣的插件.我创建了一个示例页面,看看我是否可以将它与XPage集成,如果我得到相同的错误.在完成我在下面描述的内容之后,我让它在没有您报告的问题的情况下运行.

如文档中所述,我已将插件和moment.js添加到数据库中,并使用此处的示例代码构建一个简单的演示页面.在数据库中,我使用的是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实现不相符.我知道有两种解决方法:

1. 使用Sven Hasselbach的方法在Dojo之前加载(JavaScript)资源.
2. 更改您正在使用的库的源代码.这种方法也不完美,但我喜欢的方法.在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', '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);
    }
//}
}

可以在这里找到现场演示.