Menu
I've got a date text field I wish to only sometimes attach a DatePicker to, because I have some of my own text-handling scripts which handle partial date strings. Calling .remove or .destroy leaves text formatting behavior on the input field, however, which converts my "8" string into a "8/18/2010". Even worse, if I start deleting, it steadfastly assumes that, once I reach "8/18/20", I actually wanted "8/18/2020".
What would be the best way to completely, entirely, make-it-like-it-never-was remove the datepicker from my page? I can also use it if it just ignores text I enter entirely at all times, though in that case I'd prefer it to appear on a double-click / an image-as-button, not always.
edit:
this is all within a jqGrid, where 'selector' is a text box on a date column:
function showPicker(selector) { $(selector).datepicker({ onClose: function() { $(selector).datepicker('remove'); // or 'destroy' or $('.datepicker').remove(); or $(this).datepick('remove'); } }); } This prevents it from coming back, but not from manipulating my text field. No other code (that I'm aware of) is manipulating that field's contents, just jqGrid watching for the enter-key to send the data. Looking at the page's generated code, the datepicker div is even still at the bottom.
edit2: I get the exact 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> That causes identical behavior to what I'm seeing, but changing it to 'destroy' works here but not on my page. Odd.
831
This removes .datepicker COMPLETELY:
$( selector ).datepicker( "destroy" ); $( selector ).removeClass("hasDatepicker").removeAttr('id'); Documentation:
https://api.jqueryui.com/datepicker/#method-destroy
also read the comments below
173
I solved the problem by removing the datepicker classes and then calling the unbind method on the element tied to the datepicker. That seemed to get rid of it!
eg:
$('#myelement').datepicker(); /////////datepicker attached to myelement////// and then:
$('#myelement').removeClass('calendarclass'); $('#myelement').removeClass('hasDatepicker'); $('#myelement').unbind(); Just removing the classes still let the input element invoke the datepicker when clicked in. possibly unbind() by itself would do the job, but I'm kind of a belt-and-braces chap.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
