Como adicionar o datepicker do jQuery UI a um portlet do Liferay 7?

Estou tentando adicionar o datePicker do jQuery UI ao meu portlet do Liferay 7, mas continuo recebendo este erro:

Objeto não suporta propriedade ou método ‘datepicker

Estou configurando a dependência assim:

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

Portanto, tudo o que vejo no meu portlet é o campo de input sem qualquer funcionalidade de script. Eu li que, desde a versão 7, o Liferay pré-implementou uma biblioteca jQuery básica, então eu não preciso baixar localmente e me referir a ela.

Existe alguma maneira de usar este datepicker mencionado, ou devo usar um dos AlloyUI?

Se você quiser integrar o tema / portlet / application do liferay 7 com o jQuery UI, você precisará fazer uma mudança sutil na própria biblioteca do jQuery UI.

Por padrão, a biblioteca começa com –

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

Se você adicionar a biblioteca diretamente em seu aplicativo liferay, você receberá um erro – Módulo define () anônimo incompatível:

Para superar esse problema, você precisa alterar a biblioteca como

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

O que você está fazendo é remover a referência de define call, que causa o problema, já que o jQuery já está carregado por padrão. A mesma coisa que você precisa executar para outras bibliotecas JS que contém a chamada.