disabled radio button check

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

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>

Answer 2

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