使用jQuery隐藏日期选择器 [英] Hiding a datepicker using jQuery
问题描述
我正在使用如下的struts2 jquery插件的datepicker
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" />
我想在某些条件下隐藏它.我已经写了一个像这样的jquery.
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
但是日期选择器按钮仍然显示?如何使用jquery隐藏它?
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>
推荐答案
要隐藏日期选择器,您需要
To hide a datepicker you need to
- 从输入文本字段中破坏日期选择器功能
- 隐藏输入文本字段
要显示日期选择器,您需要
To show a datepicker you need to
- 显示输入文本字段
- 向其中添加日期选择器功能
这里是演示: http://jsfiddle.net/ezKwN/
function hideIt(){
$( "#frdate" ).datepicker( "destroy" );
$( "#frdate" ).hide();
}
function showIt(){
$( "#frdate" ).show();
$( "#frdate" ).datepicker();
}
我不知道这是否也适用于Struts2 jQuery datepicker,但我希望如此.
I don't know if this works for Struts2 jQuery datepicker too, but i hope so.
但是考虑到使用该标签,您正在将该功能硬编码到页面上,因此它不应该是动态的,那么(如果上述解决方案不起作用),如果您需要根据以下内容显示/隐藏它:对于用户交互,您应该考虑使用本机jQuery datepicker而不是Struts2(仅用于动态datepicker)
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)
作为另一种选择(与使用本机jQuery重新编码所有日期选择器相比,影响较小),您只需将标记封装在<div>
内,然后隐藏/显示div.
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.
这篇关于使用jQuery隐藏日期选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!