如何将 jQuery UI 的日期选择器添加到 Liferay 7 portlet？

Question

我正在尝试将 jQuery UI's datepicker 添加到我的 Liferay 7 portlet，但我一直收到此错误：

Object doesn't support property or method 'datepicker'

我正在这样设置依赖关系：

@Component(
immediate = true,
property = {
    "com.liferay.portlet.display-category=category.tests",
    "com.liferay.portlet.header-portlet-javascript=https://code.jquery.com/ui/1.12.1/jquery-ui.js",
    "com.liferay.portlet.instanceable=true",
    "javax.portlet.display-name=Advanced Date Picker",
    "javax.portlet.init-param.template-path=/",
    "javax.portlet.init-param.view-template=/view.jsp",
    "javax.portlet.resource-bundle=content.Language",
    "javax.portlet.security-role-ref=power-user,user"
},
service = Portlet.class
)

所以我在我的 portlet 上只能看到没有任何脚本功能的输入字段。我看Liferay从第7版开始就预先实现了一个基本的jQuery库，所以我不需要下载到本地再参考

有什么方法可以使用上面提到的日期选择器，还是我应该使用 AlloyUI 的？

Answer 1

如果您想将 liferay 7 theme/portlet/application 与 jQuery UI 集成，您需要对 jQuery UI 库本身进行细微的更改。

默认库以-

开头

(function( factory ) { if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. define([ "jquery" ], factory ); } else { // Browser globals factory( jQuery ); } }(function( $ ) {

如果您直接在 liferay 应用程序中添加库，您将收到错误消息 - 不匹配的匿名 define() 模块：

要解决这个问题，您需要像

这样更改库

(function( factory ) { factory( jQuery ); }(function( $ ) {

您正在做的是删除定义调用的引用，这会导致问题，因为默认情况下已经加载 jQuery。您需要对包含调用的其他 JS 库执行相同的操作。

如何将 jQuery UI 的日期选择器添加到 Liferay 7 portlet？

How to add jQuery UI's datepicker to a Liferay 7 portlet?

jquery

jquery-ui

datepicker

jquery-ui-datepicker

liferay-7