用于 xPages 中引导程序 3 的 Eonasdan 日期时间选择器 [英] Eonasdan datetimepicker for bootstrap 3 in xPages

问题描述

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

当我重新添加一个 id 时，我在点击离开/脱离控制时收到以下错误:

错误:语法错误，无法识别的表达式:不支持的伪:_id1

需要 id 才能将数据映射回文档，但我实际上并没有使用它来附加 datetimepicker - 我为此使用了一个类:

$('.timePicker').each(function(i,el){SHARED.timePickerOpen(el)})共享 = {时间选择器打开:函数(el){$(el).datetimepicker({选择日期:假，选择时间:真实，使用当前:真实，分钟步进:5});}}

更新 #1:

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

• 在测试中，我用纯 html 编写了代码，并为该字段提供了一个 ID 和它工作正常.
• 如果我使用 xpage 字段(其中 domino 生成 ID使用冒号)日期选择器因上述错误而失败.
• 我不使用 ID 将事件绑定到字段，我使用类 get该字段然后将 datetimepicker 控件绑定到它.

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

解决方案

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

如文档中所述，我已将插件和 moment.js 添加到数据库中，并使用了示例代码 这里 构建一个简单的演示页面.在数据库中，我使用了 Bootstrap4XPages 插件(3 月发布)，所以 Bootstrap 3.1.1 已经加载.

<xp:this.resources><xp:脚本src="momentjs-2.7.0/moment.min.js"客户端=真"></xp:脚本><xp:脚本src="eonasdan-datetimepicker/js/bootstrap-datetimepicker.min.js"客户端=真"></xp:脚本><xp:styleSheethref="eonasdan-datetimepicker/css/bootstrap-datetimepicker.min.css"></xp:styleSheet></xp:this.resources><xp:divxp:key="facetMiddle"><p>此页面使用&#160;
<xp:inputTextid="inputText1"styleClass="表单控件"><xp:this.converter><xp:convertDateTime类型=两者"timeStyle="short"/></xp:this.converter></xp:inputText><跨度class="输入组插件"><跨度class="glyphicon glyphicon-calendar"></span></span>

</xp:div><xp:脚本块id="scriptBlock1"><xp:this.value><![CDATA[$(function () {$('#datetimepicker1').datetimepicker();});]]></xp:this.value></xp:scriptBlock></xp:view>

第一次打开 XPage 在 Chrome 的控制台中给了我一个熟悉的错误:

未捕获的类型错误:未定义不是函数

我以前见过一个:较新的 jQuery 插件尝试使用其 AMD 加载器，但这与 XPage 中的 Dojo 实现效果不佳.我知道有两种解决方法:

1. 使用Sven Hasselbach 的方法在 Dojo 之前加载 (JavaScript) 资源.
2. 更改您正在使用的库的源代码.这种方法也不是完美的，但我更喜欢一种.在 JavaScript 文件(在本例中名为 bootstrap-datetimepicker.js)中，您需要找到确定它是否可以使用 AMD 加载器的行.它们主要位于 JavaScript 的开头或结尾文件.

这是您要在 bootstrap-datetimepicker.js 中查找的代码:

<代码>;(功能(工厂){if (typeofdefine === 'function' &&define.amd) {//使用 AMD - 注册为匿名模块.定义(['jquery'，'时刻']，工厂)；} 别的 {//未使用 AMD - 尝试从作用域中获取依赖项.如果(！jQuery){throw 'bootstrap-datetimepicker 要求首先加载 jQuery';} else if (!moment) {throw 'bootstrap-datetimepicker 需要首先加载 moment.js';} 别的 {工厂(jQuery，时刻)；}}}

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

<代码>;(功能(工厂){//if (typeofdefine === 'function' &&define.amd) {//使用 AMD - 注册为匿名模块.//定义(['jquery', 'moment'], factory);//} 别的 {//未使用 AMD - 尝试从作用域中获取依赖项.如果(！jQuery){throw 'bootstrap-datetimepicker 要求首先加载 jQuery';} else if (!moment) {throw 'bootstrap-datetimepicker 需要首先加载 moment.js';} 别的 {工厂(jQuery，时刻)；}//}}

可以在此处找到现场演示.

I'm having a problem with the bootstrap dateTimePicker control in my xpage application and I suspect this is to do with the way xPages generates a control id.

The following code works fine without an id on the inputText element.

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

As soon as I add an id back in I receive the following error when clicking away/out of the control:

Error: Syntax error, unrecognized expression: unsupported pseudo: _id1

the id is required to map the data back to the document but I am not actually using it to attach the datetimepicker - I am using a class for this:

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

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

UPDATE #1:

Sounds like there's a bit of misunderstanding going on so I'll try to explain further...

• In testing, I wrote the code in pure html giving the field an ID and it works fine.
• If I use an xpage field (where domino generates the ID using colons) the date picker fails with the error described above.
• I do not use the ID to bind the event to the field, I use a class get the field then bind the datetimepicker control to it.

The problem appears to be the datetimepicker using the field id. Even though I obtain the field through the class name (Not the id) the datetimepicker code seems to want to use an id if one is found in the field. The datetimepicker binds to the field without any problems. When you attempt to select a time the model box displays and allows you to select a time, the error occurs when you try to click away from the field to close the model time control.

解决方案

Interesting plugin. I created a sample page to see if I can get it to integrate with an XPage and if I get the same error. After doing what I describe below I got it to run without the issues you reported.

As described in the docs, I've added the plugin and moment.js to a database, and used the sample code here to build a simple demo page. In the database I am using the Bootstrap4XPages plugin (March release), so Bootstrap 3.1.1 is already loaded.

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

Opening the XPage for the first time gave me a familiar error in Chrome's console:

Uncaught TypeError: undefined is not a function

I've seen that one before: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages. There are 2 workarounds that I know of:

1. Use Sven Hasselbach's method to load the (JavaScript) resources before Dojo.
2. Change the source code of the library you're using. This method is not perfect too, but the one I prefer. In the JavaScript file (in this case named bootstrap-datetimepicker.js you need to find the lines that determine if it can use the AMD loader. They can mostly be found at the beginning or end of a JavaScript file.

Here's the code you're looking for in 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);
    }
}
}

We then disable (or remove; your choice) the AMD part:

; (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);
    }
//}
}

A live demo can be found here.

这篇关于用于 xPages 中引导程序 3 的 Eonasdan 日期时间选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！