CODEWITHSUNDEEP
javascriptjquerydatepickerjsf-1.2
zara-90
zara-90

Reputation: 38

How can disable/enable jQueryUI datepicker using jQuery?

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


    }  }

Upvotes: 1

Views: 4547

Answers (1)

Jorge Guerrero
Jorge Guerrero

Reputation: 343

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>

Upvotes: 1

Related Questions