Hiding a datepicker using jQuery

Question

我正在使用struts2 jquery插件的datepicker如下所示

<sj:datepicker id="frdate" name="training.fromDate" 
            label="From Date (dd-mm-yyyy)" maxDate="0" />

我想把它隐藏在某些条件上.我写了一个像这样的jquery.

$("#frdate").hide();    //this will hide textbox of datepicker
$("label[for='frdate']").hide();    // this will hide label of datepicker

但是datepicker按钮仍然显示？如何使用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

要隐藏您需要的日期选择器

• 从输入文本字段中销毁datepicker功能
• 隐藏输入文本字段

要显示您需要的日期选择器

• 显示输入文本字段
• 添加日期选择器功能

这是演示:http://jsfiddle.net/ezKwN/

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

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

我不知道这是否适用于Struts2 jQuery datepicker,但我希望如此.

但是考虑到使用该标签,你是硬编码到页面的功能,它不应该是动态的,然后(如果上述解决方案不起作用),如果你需要根据用户交互显示/隐藏它,你应该考虑使用原生的jQuery datepicker而不是Struts2(仅适用于动态的datepicker)

编辑:作为另一种选择(比使用本机jQuery重新编码所有日期选择器的影响小),您可以简单地将标签封装在一个内部<div>,并隐藏/显示div.