Best IT Recipes

How do I * completely * delete jQuery UI datepicker?

I have a date text box to which I sometimes want to add a DatePicker, because I have some of my own text processing scripts that process partial date strings. However, calling .remove or .destroy leaves the text formatting behavior in the input field, which converts my string "8" to "8/18/2010". Even worse, if I start deleting, he confidently assumes that, having reached "8/18/20", I really wanted to "8/18/2020".

What would be the best way to completely, completely, make-it-like-it-never-was remove datepicker from my page? I can also use it if it just ignores the text that I enter completely, but in this case I would prefer it to be displayed twice with a click / image as a button, not always.

edit:

this is all in jqGrid, where "selector" is the text field in the date column:

function showPicker(selector) { $(selector).datepicker({ onClose: function() { $(selector).datepicker('remove'); // or 'destroy' or $('.datepicker').remove(); or $(this).datepick('remove'); } }); }

This prevents me from returning, but not manipulating my text box. No other code (which I know) manipulates this field content, just jqGrid watches the enter key to send data. Looking at the code of the generated page, the datepicker div is still at the bottom.

edit2: I get the same behavior if I do this:

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

This causes the same behavior as me, but I change it to "destroy", but not on my page. Odd

+47
jquery-ui datepicker
Aug 18 '10 at 21:47
source share
4 answers

This removes the .datepicker FULLY:

 $( selector ).datepicker( "destroy" ); $( selector ).removeClass("hasDatepicker").removeAttr('id');

Documentation:
http://docs.jquery.com/UI/Datepicker#method-destroy
also read the comments below

+100
Nov 04 '11 at 1:59 a.m.
source share

I solved the problem by removing the datepicker classes, and then calling the unbind method on the item bound to datepicker. It seemed to get rid of it!

eg:

 $('#myelement').datepicker(); /////////datepicker attached to myelement//////

and then:

 $('#myelement').removeClass('calendarclass'); $('#myelement').removeClass('hasDatepicker'); $('#myelement').unbind();

Just deleting classes still allows the input element to call datepicker when clicked. Perhaps unbind() itself will do the job, but I kind of like a belt and brackets.

+7
Nov 22 '11 at 2:00
source share

depending on your situation, you can do it server side

Example in asp-like sytax

 <% if( showDatePicker ) {%> $('#dp-div').DatePicker(); // or whatever <% } %>

Edit
How about setting dateFormat to datepicker? i.e

 $( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });

you may need

 $( ".selector" ).datepicker({ dateFormat: '...' });
+3
Aug 18 '10 at 21:51
source share

In a single page application, even if the content of the page changes, jquery ui remains garbage. Therefore, I do this in a single-page application.

 (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);

use this on the script page

 // 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); });
0
Aug 25 '17 at 7:26
source share


More articles:


All Articles