Скрытие средства выбора даты с помощью jQuery

Я использую средство выбора даты плагина struts2 jquery, как показано ниже.

<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>

jquery struts2 jquery-ui-datepicker struts2-jquery struts2-jquery-plugin
person sowmya r a    schedule 16.11.2012    source источник
comment
Может стоит скрыть это во время рендеринга, используя тег <s:if />?   -  person Quincy    schedule 16.11.2012

Ответы (2)


arrow_upward
7
arrow_downward

Чтобы скрыть средство выбора даты, вам нужно

  • уничтожить функциональность средства выбора даты из текстового поля ввода
  • скрыть поле ввода текста

Чтобы показать средство выбора даты, вам нужно

  • показать поле ввода текста
  • добавить к нему функциональность datepicker

Вот демонстрация: http://jsfiddle.net/ezKwN/

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

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

Я не знаю, работает ли это и для средства выбора даты Struts2 jQuery, но я надеюсь на это.

Но учтите, что, используя этот тег, вы жестко кодируете эту функциональность на странице, она не должна быть динамической, тогда (если вышеуказанное решение не работает), если вам нужно показать/скрыть ее в соответствии с взаимодействиями с пользователем , вам следует рассмотреть возможность использования собственного средства выбора даты jQuery вместо Struts2 (только для динамического средства выбора даты)

РЕДАКТИРОВАТЬ: в качестве еще одного варианта (с меньшим влиянием, чем перекодирование всех ваших средств выбора даты с помощью собственного jQuery), вы можете просто инкапсулировать тег внутри <div> и скрыть/показать div.

person Andrea Ligios    schedule 16.11.2012
comment
Я внес изменения, как вы предложили, но это не работает. Попробовать родной jQuery datepicker - последний вариант, прежде чем я ищу другие решения, если таковые имеются. - person sowmya r a; 16.11.2012
comment
Ваш ответ помог. Я попробовал ваш ответ сегодня еще раз. Я публикую полный код, который работал для меня. Спасибо - person sowmya r a; 20.12.2012

arrow_upward
0
arrow_downward

Вы можете скрыть средство выбора даты jquery одним из двух подходов:

  • Полностью удалить: $('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').hide();

person Kimball Robinson    schedule 10.12.2013