Twitter bootstrap xPages中引导3的Eonasdan日期时间选择器

我的xpage应用程序中的bootstrap dateTimePicker控件有问题，我怀疑这与xpage生成控件id的方式有关

如果inputText元素上没有id，以下代码可以正常工作

更新1：

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

在测试中，我用纯html编写代码，给字段一个ID和 它很好用。 如果我使用domino生成ID的xpage字段 使用冒号，日期选择器将失败，并出现上述错误。 我不使用ID将事件绑定到字段，而是使用类get 然后，该字段将datetimepicker控件绑定到该字段。

---

问题似乎是datetimepicker使用了字段id。即使我是通过类名而不是id获取字段，datetimepicker代码似乎希望在字段中找到id时使用id。datetimepicker绑定到字段时没有任何问题。当您尝试选择模型框显示的时间并允许您选择时间时，当您尝试单击字段以关闭模型时间控件时，会发生错误

千万不要硬编码Domino分配给特定元素的ID。如果您需要使用ID来实现某些功能，则Mark Roden的此实用程序非常有效：

还有它的dojo版本：

---

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

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

如文档中所述，我已将插件和添加到数据库中，并使用示例代码构建了一个简单的演示页面。在数据库中，我使用的插件是March版本，因此Bootstrap3.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>

我以前见过这种情况：较新的jQuery插件尝试使用其AMD加载程序，但这在XPages中的Dojo实现中不起作用。我知道有两种变通方法：

用于在Dojo之前加载JavaScript资源。 更改您正在使用的库的源代码。这个方法也不完美，但我更喜欢的方法。在本例中名为bootstrap-datetimepicker.js的JavaScript文件中，您需要找到确定是否可以使用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);
    }
//}
}

---

可以找到一个现场演示

Neil，如果我理解正确的话，你是说除非指定ID而不是类，否则控件将无法工作。我认为这不是真的。也许这会有帮助，这是我一年前写的一篇博客文章，我使用了日期选择器和bootstrap 2，但也许会有帮助。嗨，史蒂夫，我没有试图硬编码的ID。我已经尝试了x$，但获得字段不是问题。导致问题的是datetimepicker对jQuery对象所做的操作。看我的更新在你的右边，我不太明白这个问题。看起来你从MarkFantastic那里得到了一个很好的答案！现在工作没有任何问题。谢谢你的时间和帮助。

Uncaught TypeError: undefined is not a function

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

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