Jquery datepicker : changing the min and max date recursively

Jquery datepicker : changing the min and max date recursively

Hello All,
I am trying to add multiple date pickers on the dynamically generated rows . It works fine if its just adding a row and selecting from and to date . But say for example if i have added all the rows i need and change either from date or to date, i would like to change the min and max dates recursively. My problem it doesn't seem to recognize the on change event in the function below

Below is the code.

  1. $.datepicker.setDefaults({
  2.         defaultDate: '+2w',
  3.         changeMonth: true,
  4.         showOtherMonths: true,
  5.         selectOtherMonths: true,
  6.         changeYear: true,
  7.         dateFormat: 'dd-mm-yy',
  8.         numberOfMonths: 1,
  9.         minDate: 0
  10.         });
  11.     initDatepickers($('#t1'),0);
  12.      function initDatepickers(row, minDate)
  13.     {
  14.    
  15.     row.find('.fromdate,.todate').datepicker({
  16.     minDate:minDate,
  17.     onSelect: function(selectedDate) {
  18.     if ($(this).hasClass('fromdate')) {
  19.         var tdate=$(this).parent().parent().find('.todate').attr('id');
  20.         $('#'+tdate).datepicker('option', 'minDate', selectedDate);
  21.     
  22.        
  23.     } else {
  24.        
  25.         var fdate=$(this).parent().parent().find('.fromdate').attr('id');
  26.         $('#'+fdate).datepicker('option', 'maxDate', selectedDate);
  27.      
  28.     }
  29.     }}).on("change", function(dt) {
  30.    
  31.     if ($(this).hasClass('fromdate')) {
  32.                
  33.             $('.todate').datepicker({minDate: dt.target.value});
  34.             }
  35.         else {
  36.    
  37.             $('.fromdate').datepicker({minDate: dt.target.value});
  38.         }
  39.           });
  40.     }

I would really appreciate any help on this.

Many Thanks,