使用 jQuery 隐藏日期选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13411261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hiding a datepicker using jQuery
提问by sowmya r a
I am using struts2 jquery plugin s datepicker as below
我正在使用 struts2 jquery 插件的 datepicker 如下
<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.
我想在某些条件下隐藏它。我写了一个这样的 jquery。
$("#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?
但是日期选择器按钮仍然显示？如何使用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>
回答by Andrea Ligios
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/
这是演示：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.
我不知道这是否也适用于 Struts2 jQuery 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 日期选择器而不是 Struts2 一个（仅用于动态日期选择器）
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.
编辑：作为另一种选择（比使用原生 jQuery 重新编码所有日期选择器的影响更小），您可以简单地将标签封装在 a 中<div>，然后隐藏/显示 div。
回答by sowmya r a
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"
});
}
回答by Kimball Robinson
You can hide the jquery datepicker with one of two approaches:
您可以使用以下两种方法之一隐藏 jquery 日期选择器：
- 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.
- 完全删除它：
$('input[type=text]#yourInput').datepicker("destroy"); - 隐藏它：
$('input[type=text]#yourInput').datepicker("hide");- 隐藏它可能更好，因此您不必使用所需的所有参数重新初始化它。
You may also hide the input, if you want:
- $('input[type=text]#yourInput').hide();
如果需要，您也可以隐藏输入：- $('input[type=text]#yourInput').hide();
