我正在使用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>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 datepickerBut 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>最满意答案
要隐藏您需要的日期选择器
从输入文本字段中销毁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。
To hide a datepicker you need to
destroy the datepicker functionality from the input text field hide the input text fieldTo show a datepicker you need to
show the input text field add to it the datepicker functionalityHere 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.
更多推荐
发布评论