4

我的 xpage 应用程序中的引导 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 时，我会在单击离开/退出控件时收到以下错误：

错误：语法错误，无法识别的表达式：不支持的伪：_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 的日期时间选择器。即使我通过类名（不是 id）获取该字段，如果在该字段中找到一个 id，datetimepicker 代码似乎也想使用一个 id。datetimepicker 绑定到该字段没有任何问题。当您尝试选择模型框显示的时间并允许您选择时间时，当您尝试在该字段之外单击以关闭模型时间控件时会发生错误。

4

2 回答 2

7

有趣的插件。我创建了一个示例页面以查看是否可以将其与 XPage 集成以及是否遇到相同的错误。完成我在下面描述的操作后，我让它运行而没有您报告的问题。

如文档中所述，我已将插件和moment.js添加到数据库中，并使用此处的示例代码构建了一个简单的演示页面。在数据库中，我使用的是Bootstrap4XPages插件（3 月发布），因此 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 加载器，但这与 XPages 中的 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);
    }
//}
}

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

于 2014-06-20T09:51:22.487 回答
3

您永远不应尝试对 Domino 分配给特定元素的 ID 进行硬编码。如果您需要使用 ID 来完成某些工作，那么 Mark Roden 的这个实用程序效果很好：http: //xomino.com/2012/02/02/jquery-selector-function-for-xpages-xidinputtext1/

还有它的dojo版本：http: //xomino.com/2012/02/28/x-update-for-dojo/

只需包含这是一个客户端脚本库，或直接使用 script 标签引用。

于 2014-06-19T14:11:12.473 回答