How to hide a datepicker generated using struts2-jquery-plugin-3.7.1.jar?

Question

Hi I have generated a datepicker in struts 2 using the below code

<sj:datepicker label="Date" name="optOutDate" id="optOutDate1" maxlength="10" value="%     {optOutDate}" cssClass="Datepicker" size="9"  yearRange="2008:2027" changeMonth="true"     changeYear="true" buttonImageOnly="true" displayFormat="mm-dd-yy" showOn="button" />

The above code generated the below HTML in the browser

<tr>
<td class="tdLabel"><label for="optOutDate1" class="label">Date:</label></td>
<td>
<input type="text" name="optOutDate" size="9" maxlength="10" value="" id="optOutDate1" class="Datepicker"/>
</td>
</tr>

<script type='text/javascript'> 
jQuery(document).ready(function () {
jQuery.struts2_jquery_ui.initDatepicker(false);

});
jQuery(document).ready(function () {
var options_optOutDate1 = {};
options_optOutDate1.buttonImageOnly = true;
options_optOutDate1.changeMonth = true;
options_optOutDate1.changeYear = true;
options_optOutDate1.showOn = "button";
options_optOutDate1.buttonImage = "/kpnsnbm/struts/js/calendar.gif";
options_optOutDate1.yearRange = "2008:2027";
options_optOutDate1.displayformat = "mm-dd-yy";
options_optOutDate1.jqueryaction = "datepicker";
options_optOutDate1.id = "optOutDate1";
options_optOutDate1.name = "optOutDate";

jQuery.struts2_jquery_ui.bind(jQuery('#optOutDate1'),options_optOutDate1);

 });
</script>

Here the problem is I could not able to hide this datepicker properly; i tried to hide it via hide() method as below, but its hiding only the textbox but not the date picker image..

<script type="text/javascript">
jQuery(function($){
            $( '.Datepicker' ).hide(),
            $('.tdLabel').hide(),
            $('.label').hide();
        });
</script>

possible duplicate of [hiding datepicker using jquery](http://stackoverflow.com/questions/13411261/hiding-datepicker-using-jquery) — Andrea Ligios, Sep 25 '14 at 09:14

score 2 · Answer 1 · answered Sep 25 '14 at 10:31

Add the datapicker into a div tag

<div id="xyz">
    <sj:datepicker label="Date" name="optOutDate" id="optOutDate1" maxlength="10" value="%     {optOutDate}" cssClass="Datepicker" size="9"  yearRange="2008:2027" changeMonth="true"     changeYear="true" buttonImageOnly="true" displayFormat="mm-dd-yy" showOn="button" />
</div>

then according to the condition just hide the div tag :

$("#xyz").css("display","none");

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

As mentioned in the answer to a similar question, you need to destroy the datepicker before hiding it:

<script type="text/javascript">
    jQuery(function($){
        $('.Datepicker').datepicker("destroy"),
        $('.Datepicker').hide(),
        $('.tdLabel').hide(),
        $('.label').hide();
    });
</script>

edited May 23 '17 at 12:16

Community

1
1

answered Sep 25 '14 at 09:43

Andrea Ligios

49,480
26
114
243

score 1 · Answer 3 · edited Sep 30 '14 at 02:15

1

You should be able to target the element and hide it like this..

$( ".Datepicker" ).datepicker( "widget" ).hide();

edited Sep 30 '14 at 02:15

davidcondrey

34,416
17
114
136

answered Sep 30 '14 at 01:46

Quincy

4,393
3
26
40

score 0 · Answer 4 · answered Sep 25 '14 at 07:27

0

Refer the below link https://code.google.com/p/struts2-jquery/wiki/DatePickerTag

Example:

Use "showAnim" as attribute for setting the name of the animation used to show/hide the datepicker. Use 'show' (the default), 'slideDown', 'fadeIn', or any of the show/hide jQuery UI effects. Default: 'show'

answered Sep 25 '14 at 07:27

Ramachandran Krishnan

248
1
7

Hi thanks for the reply. But my requirment is to hide the textbox , lable and the datepicker image. Setting showAnim just disables the datepicker popup. I tried to hide it via div tag, but it is not hiding.. – Mohaideen Sep 25 '14 at 07:58

How to hide a datepicker generated using struts2-jquery-plugin-3.7.1.jar?

4 Answers4