Need to add range limit of 30 days on 'To date' once user selects 'From date' in JavaScript

Question

Need to add range limit of 30 days on To date once user selects From date in javascript .

I have tried using it the way its been shown below, but it isn't working.

Tried using max date too but it doesn't work dynamically depending on user selection.

Need to use datepicker only.

$(document).ready(function() {
    
    $('#csFromdt').datepicker({
        dateFormat : 'dd/mm/yy',
        changeMonth : true,
        changeYear : true,
        onSelect : function(selected) {
            $("#csTodt").datepicker("option", "minDate", selected)
        }
    });

    $("#csFromdt").keyup(function(e) {

        if (e.keyCode != 8) {
            if ($(this).val().length == 2) {
                $(this).val($(this).val() + "/");
            } else if ($(this).val().length == 5) {
                $(this).val($(this).val() + "/");
            }
        }
    });

    $('#csTodt').datepicker({
        dateFormat : 'dd/mm/yy',
        changeMonth : true,
        changeYear : true
        /*maxDays: 10*/
        /*maxDate : '15'*/
    })/*.on('changeDate', function(selected) {
        let csFromdt = new Date(selected.date.valueOf());
        let csTodt = new Date(csFromdt);
        csTodt = new Date(csTodt.setDate(csTodt.getDate() + 15));
        $('#csTodt').datepicker('setStartDate', csFromdt);
        $('#csTodt').datepicker('setEndDate', csTodt);
      });*/


    $("#csTodt").keyup(function(e) {
        if (e.keyCode != 8) {
            if ($(this).val().length == 2) {
                $(this).val($(this).val() + "/");
            } else if ($(this).val().length == 5) {
                $(this).val($(this).val() + "/");
            }
        }
    });

    $(".datepicker").datepicker({
        dateFormat : 'dd/mm/yy',
        changeMonth : true,
        changeYear : true,
        maxDate : '0'
    });

});

Answer 1

I tried my best..any query ask me

  <script type="text/javascript">
     $(document).ready(function(){
      
       // initializing jquery datepicker
       $( "#csFromdt, #csTodt" ).datepicker({
         dateFormat : 'dd/mm/yy',
         changeMonth : true,
         changeYear : true,
       });
     
       $("#csFromdt").change(function(){ 
         var fromdate = $("#csFromdt").val();
     
         // from dd/mm/yy to new date(yyyy, mm, dd) format
         var newdate = fromdate.split("/");
         var nd = new Date(+newdate[2], newdate[1] - 1, +newdate[0]); //newdate[0] = dd; newdate[1] = mm, newdate[2] = yy
         nd.setDate(nd.getDate() + 30); //adding 30 days from  fromdate
         $("#csTodt").removeAttr('disabled'); //disabling the csTodt input box //optional if u disabled todate input box
     
         $('#csTodt').datepicker('option', 'minDate', fromdate); //setting min  date
         $('#csTodt').datepicker('option', 'maxDate', nd); //setting  max date
     
       });
     
     });
  </script>