Hiding a datepicker using jQuery

Question

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>

Answer 1

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.

Answer 2

function hideIt(){
  $("#frdate").hide();
  $("label[for='frdate']").hide();
  $("#frdate").datepicker("destroy" );
 }

function showIt(){
  $("#frdate").show();
  $("label[for='frdate']").show();
  $("#frdate").datepicker({
   showOn : "both",
   buttonImage : "/path/struts/js/calendar.gif",
   maxDate : "0",
   jqueryaction : "datepicker",
   id : "frdate",
   name : "training.fromDate"
   });
 }

Answer 3

You can hide the jquery datepicker with one of two approaches:

• Removing it entirely: $('input[type=text]#yourInput').datepicker("destroy");
• Hiding it: $('input[type=text]#yourInput').datepicker("hide");
  • Hiding it is probably better, so you don't have to re-initialize it with all the parameters you want.

You may also hide the input, if you want: - $('input[type=text]#yourInput').hide();