如何将jQuery UI的日期选择器添加到Liferay 7 Portlet? [英] How to add jQuery UI's datepicker to a Liferay 7 portlet?

问题描述

我正在尝试将 jQuery UI的日期选择器添加到我的Liferay 7 portlet中，但是我一直在获取它错误:

I'm trying to add jQuery UI's datepicker to my Liferay 7 portlet, yet I keep getting this error:

对象不支持属性或方法"datepicker"

Object doesn't support property or method 'datepicker'

我正在像这样设置依赖项:

I'm setting up the dependency like this:

@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上只能看到的输入字段没有任何脚本功能. 我读到从版本7开始，Liferay已经预实现了一个基本的jQuery库，因此我不需要在本地下载并引用它.

So all I can see on my portlet is the input field without any scripted functionality. I read that since version 7, Liferay has preimplemented a basic jQuery library, so I do not need to download locally and refer to it.

有没有办法使用上述提到的日期选择器，还是应该使用AlloyUI的日期选择器?

Is there any way to use this the mentioned datepicker, or should I use AlloyUI's one?

推荐答案

如果要将liferay 7主题/portlet/应用程序与jQuery UI集成，则需要在jQuery UI库本身中进行细微更改.

If you want to integrate liferay 7 theme/portlet/application with jQuery UI, you need to make subtle change in jQuery UI library itself.

默认库以-

(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()模块:

If you add library directly in your liferay application, you will be getting an error - Mismatched anonymous define() module:

要解决此问题，您需要更改库，例如

To overcome this issue, you need to change the library like

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

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

What you are doing is removing the reference of define call, which causes the issue, as jQuery is already loaded by default. Same thing you need to perform for other JS libraries which contains the call.

这篇关于如何将jQuery UI的日期选择器添加到Liferay 7 Portlet?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！