not - ¿Cómo elimino*completamente*un jQuery UI datepicker?
tooltip jquery ui ejemplos (4)
Tengo un campo de texto de fecha al que solo deseo adjuntar un DatePicker, porque tengo algunos de mis propios scripts de manejo de texto que manejan cadenas de fechas parciales. Llamar .remove o .destroy deja el comportamiento del formato de texto en el campo de entrada, sin embargo, que convierte mi cadena "8" en "18/08/2010". Peor aún, si empiezo a eliminar, asumo firmemente que, una vez que llegue al "8/18/20", realmente quería "8/18/2020".
¿Cuál sería la mejor manera de eliminar por completo, completamente, hacer-que-como-que-nunca-fue el datepicker de mi página? También puedo usarlo si solo ignora el texto que ingresé completamente en todo momento, aunque en ese caso prefiero que aparezca en un doble clic / una imagen como botón, no siempre.
editar:
todo esto está dentro de un jqGrid, donde ''selector'' es un cuadro de texto en una columna de fecha:
function showPicker(selector) {
$(selector).datepicker({
onClose: function() {
$(selector).datepicker(''remove'');
// or ''destroy'' or $(''.datepicker'').remove(); or $(this).datepick(''remove'');
}
});
}
Esto evita que regrese, pero no manipula mi campo de texto. Ningún otro código (que yo sepa) está manipulando el contenido de ese campo, simplemente jqGrid está mirando para que la tecla Enter envíe los datos. Al mirar el código generado de la página, el div datepicker aún está aún en la parte inferior.
edit2: obtengo exactamente el mismo comportamiento si hago esto:
<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready( function(){
$("#pickle").datepicker({
onClose: function(){
$(this).datepicker(''remove'');
}
});
});
</script>
<input type="text" id="pickle" />
</body>
</html>
Eso causa un comportamiento idéntico al que estoy viendo, pero cambiarlo a ''destruir'' funciona aquí pero no en mi página. Impar.
En la aplicación de una sola página, incluso si el contenido de la página cambia, jquery ui sigue siendo basura. Así que me gusta esto en la aplicación de una sola página.
(function($) {
if ($.ui !== null && typeof $.ui !== typeof undefined) {
/**
* dialog fix
*/
var $oDialog = $.fn.dialog
$.fn.dialog = function(mth, dialogOpts) {
if (mth !== null && typeof mth === ''string'') {
if (mth === ''clean'') {
var id = $(this).attr(''id''); // you must set id
if (id !== null && typeof id !== typeof undefined) {
// garbage jquery ui elements remove
$(''[aria-describedby="'' + id + ''"]'', document).each(function() {
if ($(this).dialog(''instance'')) {
$(this).dialog(''destroy'');
}
$(this).remove();
});
}
return this;
} else if (mth === ''open'' && dialogOpts !== null && typeof dialogOpts === ''object'') {
if ($oDialog.apply(this, [''instance''])) {
$oDialog.apply(this, [''option'', dialogOpts]);
return $oDialog.apply(this, [''open'']);
} else {
return $oDialog.apply(this, dialogOpts);
}
}
}
return $oDialog.apply(this, arguments);
};
}
})(jQuery);
usar así en el script de la página
// target layer in my page
var $xlsDiv = $(''#xlsUpFormDiv'');
$xlsDiv.dialog(''clean''); // clean garbage dialog
var dialogOpts = {
autoOpen: false,
closeOnEscape: true,
height: 800,
width: 600,
modal: true,
buttons: ...,
close: function() {
$xlsForm.reset();
}
};
// initialize original jquery ui
$xlsDiv.dialog(dialogOpts);
// open button click
$(''#btnViewXlsUpForm'').on("click", function() {
$xlsDiv.dialog(''open'', dialogOpts);
});
Esto elimina .datepicker COMPLETAMENTE:
$( selector ).datepicker( "destroy" );
$( selector ).removeClass("hasDatepicker").removeAttr(''id'');
Documentación:
http://docs.jquery.com/UI/Datepicker#method-destroy
Lea también los comentarios a continuación
Resolví el problema eliminando las clases datepicker y luego llamando al método de desvinculación en el elemento vinculado al datepicker. ¡Eso pareció deshacerse de eso!
p.ej:
$(''#myelement'').datepicker();
/////////datepicker attached to myelement//////
y entonces:
$(''#myelement'').removeClass(''calendarclass'');
$(''#myelement'').removeClass(''hasDatepicker'');
$(''#myelement'').unbind();
Solo eliminar las clases todavía permite que el elemento de entrada invoque al selector de fechas cuando se hace clic en él. Posiblemente, unbind() por sí solo haga el trabajo, pero soy un tipo de correas y llaves.
dependiendo de su situación, podría hacerlo desde el lado del servidor
Ex. en sytax similar a asp
<% if( showDatePicker ) {%>
$(''#dp-div'').DatePicker(); // or whatever
<% } %>
Editar
¿Qué hay de la configuración de la dateFormat del datepicker? es decir
$( ".selector" ).datepicker({ dateFormat: ''yy-mm-dd'' });
puede que quieras
$( ".selector" ).datepicker({ dateFormat: ''...'' });