Hiding a datepicker using jQuery

jquery, jquery-ui-datepicker, struts2, struts2-jquery, struts2-jquery-plugin

Solution

To hide a datepicker you need to

- destroy the datepicker functionality from the input text field

- hide the input text field

To show a datepicker you need to

- show the input text field

- add to it the datepicker functionality

Here is the demo: http://jsfiddle.net/ezKwN/

function hideIt(){
    $( "#frdate" ).datepicker( "destroy" );
    $( "#frdate" ).hide();
}

function showIt(){
    $( "#frdate" ).show();
    $( "#frdate" ).datepicker();
}

I don't know if this works for Struts2 jQuery datepicker too, but i hope so.

But consider that using that tag, you are hard-coding that funcionality to the page, it is not supposed to be dynamic, then (if the above solution doesn't work), if you need to show / hide it according to user interactions, you should consider using the native jQuery datepicker instead of the Struts2 one (only for the dynamic datepicker)

EDIT: as another option (with an smaller impact than recoding all your datepickers with native jQuery), you can simply encapsulate the tag inside a `<div>`, and hide / show the div.

Problem

I am using struts2 jquery plugin s datepicker as below ``` <sj:datepicker id="frdate" name="training.fromDate" label="From Date (dd-mm-yyyy)" maxDate="0" /> ``` I want to hide this on certain coditions.I have written a jquery like this. ``` $("#frdate").hide(); //this will hide textbox of datepicker $("label[for='frdate']").hide(); // this will hide label of datepicker ``` But datepicker button still showing? How to hide it using jquery? ``` The generated html code is: <tr> <td class="tdLabel"> <label for="frdate" class="label">From Date (dd-mm-yyyy):</label></td> <td><input type="text" name="training.fromDate" value="" id="frdate"/></td> </tr> <script type='text/javascript'> jQuery(document).ready(function () { jQuery.struts2_jquery_ui.initDatepicker(false); }); jQuery(document).ready(function () { var options_frdate = {}; options_frdate.showOn = "both"; options_frdate.buttonImage = "/ONLINE/struts/js/calendar.gif"; options_frdate.maxDate = "0"; options_frdate.jqueryaction = "datepicker"; options_frdate.id = "frdate"; options_frdate.name = "training.fromDate"; jQuery.struts2_jquery_ui.bind(jQuery('#frdate'),options_frdate); }); </script> ```

Original source