twitter bootstrap - Eonasdan datetimepicker para bootstrap 3 en xPages
twitter-bootstrap bootstrap-datetimepicker (2)
Tengo un problema con el control bootstrap dateTimePicker en mi aplicación xpage y sospecho que esto tiene que ver con la forma en que xPages genera un ID de control.
El siguiente código funciona bien sin una identificación en el elemento inputText.
<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>
Tan pronto como vuelva a agregar una identificación, recibo el siguiente error al hacer clic fuera / fuera del control:
Error: error de sintaxis, expresión no reconocida: pseudo no compatible: _id1
se requiere la identificación para volver a asignar los datos al documento, pero en realidad no lo estoy usando para adjuntar el datetimepicker: estoy usando una clase para esto:
$(''.timePicker'').each(function(i,el){SHARED.timePickerOpen(el)})
SHARED = {
timePickerOpen: function(el){
$(el).datetimepicker({
pickDate: false,
pickTime: true,
useCurrent: true,
minuteStepping:5
});
}
}
ACTUALIZACIÓN # 1:
Parece que hay un malentendido, así que trataré de explicarlo más ...
- En las pruebas, escribí el código en html puro dando al campo una ID y funciona bien.
- Si utilizo un campo xpage (donde domino genera la ID usando dos puntos), el selector de fecha falla con el error descrito anteriormente.
- No uso la ID para vincular el evento al campo, utilizo una clase get the field y luego le agrego el control datetimepicker.
El problema parece ser el datetimepicker que usa el identificador de campo. Aunque obtengo el campo a través del nombre de la clase (No la identificación), parece que el código datetimepicker quiere usar una identificación si se encuentra en el campo. El datetimepicker se une al campo sin ningún problema. Cuando intenta seleccionar una hora que muestra el cuadro de modelo y le permite seleccionar una hora, el error ocurre cuando intenta hacer clic fuera del campo para cerrar el control de tiempo del modelo.
Nunca intente codificar el ID que Domino asigna a un elemento en particular. Si necesita usar la ID para hacer que algo funcione, entonces esta utilidad de Mark Roden funciona muy bien: http://xomino.com/2012/02/02/jquery-selector-function-for-xpages-xidinputtext1/
También su versión dojo: http://xomino.com/2012/02/28/x-update-for-dojo/
Solo incluya esta es una biblioteca de scripts de cliente, o referencia directamente usando la etiqueta de script.
Interesante plugin Creé una página de muestra para ver si puedo integrarla con una página XPage y si obtengo el mismo error. Después de hacer lo que describo a continuación, lo hice funcionar sin los problemas que informaste.
Como se describe en los documentos, agregué el complemento y moment.js a una base de datos, y usé el código de ejemplo aquí para crear una página de demostración simple. En la base de datos, estoy usando el complemento Bootstrap4XPages (versión de marzo), por lo que Bootstrap 3.1.1 ya está cargado.
<?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 
<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>
Abrir la página XPage por primera vez me produjo un error familiar en la consola de Chrome:
Uncaught TypeError: undefined is not a function
Ya lo he visto antes: los plugins de jQuery más recientes intentan usar su cargador AMD, pero eso no funciona bien con la implementación de Dojo en XPages. Hay 2 soluciones alternativas que conozco:
- Utilice el método de Sven Hasselbach para cargar los recursos (JavaScript) antes de Dojo.
- Cambie el código fuente de la biblioteca que está utilizando. Este método no es perfecto también, pero el que prefiero. En el archivo JavaScript (en este caso llamado
bootstrap-datetimepicker.js, debe encontrar las líneas que determinan si puede usar el cargador AMD. En su mayoría se pueden encontrar al principio o al final de un archivo JavaScript).
Aquí está el código que está buscando en 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);
}
}
}
Luego deshabilitamos (o eliminamos, su elección) la parte de 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);
}
//}
}
Una demostración en vivo se puede encontrar aquí .