JSFiddle - React, Tailwind, and code Playground

by SAJINA C

HTML

<div><label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
    <input type="text" id="to" name="to">
    </div>

    </br>
<div id='divLeaveStatus'><input type='radio' name='choices' value='FullDay'checked="checked">FullDay</input>
<input type='radio' name='choices' value='ForeNoon'>ForeNoon</input>
<input type='radio' name='choices' value='AfterNoon'>AfterNoon</input>
   </div>

JavaScript

//radioButton change validation starts here
$('#divLeaveStatus>input[type="radio"]').change(function(event) {
      // State has changed to checked/unchecked.
     var value=$("#divLeaveStatus>input:radio[name='choices']:checked").val();
    console.clear();
    console.log(value);
    if(value=='ForeNoon'||value=='AfterNoon'){
    $('#to').val($('#from').val());
      $( "#to" ).datepicker( 'disable');
        
    }else{
     $('#to').val('');
      $( "#to" ).datepicker( 'enable');
    }
});
//radioButton change validation ends here

// From Datepicker
$( "#from" ).datepicker({
    defaultDate: "+1d",
    dateFormat : "dd/mm/yy",
    changeMonth: false,
    numberOfMonths: 1,
    minDate: "+1d",
    onClose: function(selectedDate) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
        // Change value of second parameter for your needs
        // 7 = One Week, 14 = Two Weeks, etc
        $( "#to" ).datepicker( "option", "maxDate", new_date(selectedDate, 30) );
    }
});

// To Datepicker
$( "#to" ).datepicker({
    dateFormat : "dd/mm/yy",
    defaultDate: "+1w",
    changeMonth: false,
    numberOfMonths: 1
});

// Do not edit below this line
function new_date(old_date, days_after) {
    var month = parseInt(old_date.substring(0, 2))-1;
    var day = parseInt(old_date.substring(3, 5));
    var year = parseInt(old_date.substring(6, 10));
    var myDate = new Date(year, month, day);
    myDate.setDate(myDate.getDate() + days_after);
    var newMonth = myDate.getMonth()+1;
    var newDay = myDate.getDate();
    var newYear = myDate.getFullYear();
    var output = newMonth + "/" + newDay + "/" + newYear;  
    return output;
}

// Created By: Rafael Leonidas Cepeda