禁用单选按钮检查

Question

Good day, Are there any JavaScript method for “Warranty” radio button check, because “Warranty” should be disabled if purchase date is greater than 24 months.

I create “(Purchase date and Repair date)” The repair date must be later than the purchase date this part done and working 100%

I only need help with “Warranty” should be disabled if purchase date is greater than 24 months. Thanks in advance for the help.

 $(document).ready(function() { var today = new Date(); $('.dt1').datepicker({ format: 'mm-dd-yyyy', autoclose: true, endDate: "today", maxDate: today }).on('changeDate', function(date) { $(this).datepicker('hide'); var date2 = $('.dt1').datepicker('getDate'); date2.setDate(date2.getDate() + 1); $('.dt2').datepicker('setDate', date2); //sets minDate to dt1 date + 1 $('.dt2').datepicker('option', 'minDate', date2); }); $('.dt2').datepicker({ Format: 'mm-dd-yyyy', endDate: "today", maxDate: today, onClose: function() { var dt1 = $('.dt1').datepicker('getDate'); console.log(dt1); var dt2 = $('.dt2').datepicker('getDate'); if (dt2 <= dt1) { var minDate = $('.dt2').datepicker('option', 'minDate'); $('.dt2').datepicker('setDate', minDate); } } }); var a = moment('1/1/2019', 'DD/MM/YYYY'); var b = moment('getMonth()', 'DD/MM/YYYY'); var months = b.diff(a, 'months'); $('#res').text(months); });

 #repair { margin-left: 25em; } #purchase { margin-left: 10em; }

 <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> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> <:--Purchase Date--> <div id="purchase"> <label>Purchase Date:</label> <div> <input type="text" id="purchaseDate" class="dt1" /> </div> </div> <:--Repair Date--> <div id="repair"> <label>Repair Date:</label> <div> <input type="text" id="repairDate" class="dt2" /> </div> </div> <!--Warranty--> <div id="radios1"> <p>Under Warranty</p> <label class="form-check-label" for="gridRadios3">Warranty: </label> <input class="check-input" type="radio" name="gridRadios" id="gridRadios3" value="option1"><br> </div>

Answer 1

if I well understand, you can check date difference on every date change event:

$(document).ready(function() {

    function isUnderWarranty() {
    let rDate = new Date($('#repairDate').val());
    let pDate = new Date($('#purchaseDate').val());
    console.log(rDate);
    console.log(pDate);
    let months24_ms = 1000 * 60 * 60 * 24 * 30.5 * 24;
    if(rDate - pDate < months24_ms) {
        console.log('ena');
        document.body.querySelector('#gridRadios3').disabled = false;
    } else {
        console.log('disa')
      document.body.querySelector('#gridRadios3').disabled = true;
    }
  }

  var today = new Date();
  $('#purchaseDate').datepicker({
    format: 'mm-dd-yyyy',
    onClose: isUnderWarranty
  });

  $('#repairDate').datepicker({
    Format: 'mm-dd-yyyy',
    onClose: isUnderWarranty
  });
});

Answer 2

I broke up what you were attempting to do into its seperate parts in the example below.

This will help keep your code organised and and managable, also I changed it to compare to 2 years rather than 24 months as months vary in length and it complicates the comparison, there is a amount of days variable available too.

Hope this helps and gives you an idea on how to better organise your code.

 var pd = $('#purchaseDate'); var rd = $('#repairDate'); var war = $('#gridRadios3'); $(function(){ initDatePicker(); pd.on('change',function(){ var date = $(this).datepicker('getDate'); updateRepairDatePicker(date); updateWarrantyRadio(date); }); }); function updateRepairDatePicker(date){ date.setDate(date.getDate()+1); rd.datepicker('setDate', date); rd.datepicker('option', {minDate: date, disabled:false}); } function updateWarrantyRadio(date){ var today = new Date(); //var difference_in_days = (today - date) / (1000 * 3600 * 24); var difference_in_years = (today - date) / (1000 * 3600 * 24 * 365); war.prop('disabled', difference_in_years > 2); } function initDatePicker(){ var today = new Date(); pd.datepicker({ format: 'mm-dd-yyyy', endDate: "today", maxDate: today }); rd.datepicker({ format: 'mm-dd-yyyy', disabled:true }); }

 .dt { margin-left: 1em; display:inline-block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <div id="purchase"> <label>Purchase Date:</label> <input type="text" id="purchaseDate" class="dt" /> </div> <div id="repair"> <label>Repair Date:</label> <input type="text" id="repairDate" class="dt" /> </div> <div id="radios1"> <p>Under Warranty</p> <label class="form-check-label" for="gridRadios3">Warranty: </label> <input class="check-input" type="radio" name="gridRadios" id="gridRadios3" value="option1"><br> </div>