文章/答案/技术大牛

发布

社区首页 >问答首页 >xPages中用于引导3的Eonasdan日期时间选择器

问xPages中用于引导3的Eonasdan日期时间选择器
EN

Stack Overflow用户

提问于 2014-06-19 13:32:38

回答 1查看 4.8K关注 0票数 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将数据映射回文档，但我实际上并不使用它来附加日期选择器--我使用的是一个类：

$('.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。日期选择器绑定到字段，没有任何问题。当您尝试选择“模型”框显示的时间并允许您选择时间时，当您试图从字段中单击以关闭模型时间控件时，会发生错误。

twitter-bootstrap

xpages

bootstrap-datetimepicker

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-06-20 09:51:22

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

正如在文档中所描述的，我将插件和moment.js添加到数据库中，并使用示例代码here构建了一个简单的演示页面。在数据库中，我使用的是Bootstrap4XPages插件(三月版)，因此已经加载了Bootstra3.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>

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

Uncaught TypeError: undefined is not a function

我以前见过:更新的jQuery插件尝试使用它的XPages加载程序，但这并不适合XPages中的Dojo实现。据我所知，有两个解决办法：

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

下面是您在引导-datetimeicker.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);
    }
//}
}

here可以找到一个现场演示。

票数 7

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24307884

复制

相似问题

问xPages中用于引导3的Eonasdan日期时间选择器
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问xPages中用于引导3的Eonasdan日期时间选择器EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问xPages中用于引导3的Eonasdan日期时间选择器
EN