4

我正在使用 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

但是日期选择器按钮仍然显示？如何使用 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>
4

3 回答 3

8

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

  • 从输入文本字段中销毁日期选择器功能
  • 隐藏输入文本字段

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

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

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

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

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

我不知道这是否也适用于 Struts2 jQuery datepicker，但我希望如此。

但是考虑到使用该标签，您正在将该功能硬编码到页面，它不应该是动态的，然后（如果上述解决方案不起作用），如果您需要根据用户交互显示/隐藏它，您应该考虑使用原生 jQuery 日期选择器而不是 Struts2 之一（仅适用于动态日期选择器）

编辑：作为另一种选择（与使用原生 jQuery 重新编码所有日期选择器相比影响更小），您可以简单地将标签封装在 a<div>中，并隐藏/显示 div。

于 2012-11-16T10:54:13.907 回答
1 
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"
   });
 }
于 2012-12-20T10:57:03.223 回答
0

您可以使用以下两种方法之一隐藏 jquery datepicker：

  • 完全删除它：$('input[type=text]#yourInput').datepicker("destroy");
  • 隐藏它：$('input[type=text]#yourInput').datepicker("hide");
    • 隐藏它可能会更好，因此您不必使用所需的所有参数重新初始化它。

如果需要，您还可以隐藏输入：-$('input[type=text]#yourInput').hide();

于 2013-12-10T17:43:45.017 回答