Question

Possible Duplicate:
Remove Datepicker Function dynamically

In my web application i am using the datepicker. I am using the same page for create and edit the details. While editing the page the date should not be editable. I am disabling the datepicker by using the following code.

$( "#datepicker" ).datepicker("disable");

But the above code also disables the input field also.(If the input field is disabled in edit mode the data is not posted to the PHP). I want to disable the datepicker without disabling the input field and i want to show the “ui-datepicker-trigger” icon. Can anyone help me out.
Following is the link to JSFIDDLE

http://jsfiddle.net/Xppj6/1/

Answer 1

Try,

$( "#datepicker" ).datepicker( "destroy" );

In response to your comment:
if you want to preserve icon just do it manually, i.e. copy icon from DOM tree, destroy datepicker (this will remove icon from DOM) then reinsert it into DOM. May be not best performant but no human should notice unless you execute this thousands of times per second 🙂

basically my idea is to do something like that:

   $img = $('#datepicker').parent().find('img'); //fetch datepicker icon from DOM
   $( "#datepicker" ).datepicker("destroy"); //destroy datepicker
   $('#datepicker').parent().append($img); //reappend icon into its original place

in js fiddle: http://jsfiddle.net/Xppj6/7/
and a fiddle with both “disable” and “enable” button: http://jsfiddle.net/Xppj6/14/

Note: You will have to recreate datepicker completely if you need to undo this operation. You will also have to destroy manually appended icon before creating new datepicker (as new datepicker will createn ew icon)

Refrence:
http://api.jqueryui.com/datepicker/#method-destroy