How do I *completely* remove a jQuery UI datepicker?
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.
Answer
This removes .datepicker COMPLETELY:
$( selector ).datepicker( "destroy" );
$( selector ).removeClass("hasDatepicker").removeAttr('id');
Documentation:
http://docs.jquery.com/UI/Datepicker#method-destroy
also read the comments below