1

I want to disable and enable the jQueryUI datepicker field when a radio button change. I use this code and first time works and destroy datepicker but when I change radio button, It doesn't build datepicker again.(when click first radio button, two upper datepicker should enable and two downer one should disable completely.when click second radio button,it should disable all the fields)enter image description here

enter image description here

<tr>
        <td>
            <ct:selectOneRadio id="periodType"
                               onclick="submit();changeLableDate()"
                               label=""
                               labelKey="bond.bondPeriod"
                               value="#{bean.criteria.bondPeriod.periodTypeId}"
                               selectItems="#{bean.periodItems}"/>
        </td>
        <td colspan="3" style="width:65%"/>

    </tr>
 <tr>
        <td style="width:35% !important;">
            <ct:date id="fromDate2" value="#{bean.criteria.fromDate2}"
                     labelKey="reportCriteria.fromDate"
                     label="#{messages['reportCriteria.fromDate']}:"/>
        </td>
        <td/>
        <td style="width:35% !important;">
            <ct:date id="toDate2" value="#{bean.criteria.toDate2}"
                     labelKey="reportCriteria.toDate"
                     label="#{messages['reportCriteria.toDate']}:" />

    </tr>

    <tr>
        <td style="width:35% !important;">
            <ct:date id="fromDateIssue" value="#{bean.criteria.fromDateBond}"
                     labelKey="reportCriteria.fromDate"
                     label="#{messages['issue.fromDate']}:"
                    />
        </td>
        <td/>
        <td style="width:35% !important;">
            <ct:date id="toDateIssue" value="#{bean.criteria.toDateBond}"
                     labelKey="reportCriteria.toDate" 
                     label="#{messages['issue.toDate']}:" />

        </td>
        <td colspan="2" style="width:30%"/>

    </tr>

<script type="text/javascript">
function changeLableDate() {
  if (document.forms.reportForm["reportForm:periodType"][0].checked) {
        $(".fromDateIssue").prop("disabled", true);
        $(".toDateIssue").prop("disabled", true);
        $(".toDate2").prop("disabled", false);
        $(".fromDate2").prop("disabled", false);
        $("#reportForm\\:fromDateIssue").datepicker("destroy");
        $("#reportForm\\:toDateIssue").datepicker("destroy");

    }
    else if (document.forms.reportForm["reportForm:periodType"][1].checked) {

        $("#reportForm\\:fromDate2").datepicker("destroy");
        $("#reportForm\\:toDate2").datepicker("destroy");
        $("#reportForm\\:fromDateIssue").datepicker("destroy");
        $("#reportForm\\:toDateIssue").datepicker("destroy");
        $(".fromDateIssue").prop("disabled", true);
        $(".toDateIssue").prop("disabled", true);
        $(".toDate2").prop("disabled", true);
        $(".fromDate2").prop("disabled", true);


    }  }
Jorge Guerrero
  • 323
  • 3
  • 5
zara-90
  • 38
  • 2
  • 8

1 Answers1

1

You could try this from the jqueryui datepicker documentation. http://api.jqueryui.com/datepicker/#method-option

$( ".selector" ).datepicker( "option", "disabled", true );

Take a look of this example. 

  $( function() {
    $( "#datepicker" ).datepicker({
      showOtherMonths: true,
      selectOtherMonths: true
    });
    
    $("#disabled").click(function(){
       $( "#datepicker" ).datepicker( "option", "disabled", true );
    });

    $("#enabled").click(function(){
       $( "#datepicker" ).datepicker( "option", "disabled", false );
    });
    
  } );
<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
  <button id="disabled">disabled</button>
  <button id="enabled">enabled</button>
<p>Date: <input type="text" id="datepicker"></p>

 
</body>
</html>
Jorge Guerrero
  • 323
  • 3
  • 5