Get integer value from Input and generate input dynamically

Question

i want to get inputs dynamically when focus out from \"End Date\" input and pass the number of days to JQuery and generate it.i tried this code

Answer 1

i want to get Panels dynamically when focus out from "Date" input and pass the number of days to JQuery and generate it.i tried this code but not working Get Value from days and generate number of panels..thats it

I changed slightly from focus out to click event and formatted the input as a button. You may always to change back. The problem you are experiencing is:

$(this).closest(".it-right-side").find(".panel-group").append(panelHtml);

The element with class it-right-side is not the closest element. The correct way is:

$(this).closest('.col-md-2').siblings(".it-right-side").find(".panel-group")

It's the sibling of the closest col-md-2 element.

Moreover, I added empty before to fill the panel-group.

If you need to create Panels automatically when select the date change this line inside the "$from.add($to).change(function () {":

$('#days').attr('value', days)

to:

$('#days').attr('value', days).trigger('click');

The snippet:

$(document).on('click', '#days', function () {
  var i;
  var val = $(this).val();
  if (val == 0) {
      return;
  }
  var panelGroup = $(this).closest('.col-md-2').siblings(".it-right-side").find(".panel-group");
  panelGroup.empty();
  for (i = 0; i < val; i++) {
      var panelHtml = '
 ' +
              '
 ' +
              '
 ' +
              'Day ' + (i + 1) + '
' +
              '
 ' +
              '
 ' +
              '
' +
              '
 ' +
              '
' +
              '
 ' +
              '
 ' +
              '
 ' +
              '
 ' +
              '
 ' +
              '
 ' +
              '
 ' +
              '  ' +
              '
 ' +
              '
';

      panelGroup.append(panelHtml);
  }
});


var $from = $("#firstDate"),
        $to = $("#secondDate");

$from.datepicker({
    numberOfMonths: 1,
    minDate: 0,
    dateFormat: 'dd-mm-yy',
    onClose: function (selectedDate) {
        $to.datepicker("option", "minDate", selectedDate);
    }
});

$to.datepicker({
    defaultDate: "+1w",
    numberOfMonths: 1,
    minDate: 0,
    dateFormat: 'dd-mm-yy',
    onClose: function (selectedDate) {
        $from.datepicker("option", "maxDate", selectedDate);
    }
});
$from.add($to).change(function () {
    var dayFrom = $from.datepicker('getDate');
    var dayTo = $to.datepicker('getDate');
    if (dayFrom && dayTo) {
        var days = calcDaysBetween(dayFrom, dayTo);
        $('#days').attr('value', days).trigger('click');
//
    }
});

function calcDaysBetween(startDate, endDate) {
    return (endDate - startDate) / (1000 * 60 * 60 * 24);
}

  
  
  
  




    
 
        Start Date
        
    


    
 
        End Date
        
    


    

        Day(s)
        
    




    
Set your schedules

    

        

            
            

                

                    

                        

                             Day 1