I'm using bootstrap jquery daterangepicker. My intention is to find the number of days between 2 dates. In my HTML I'm using 2 input fields as below

<div class="col-12 form-group has-feedback">
    <label>From <span class="text-danger">*</span></label>
    <input type="text" class="form-control has-feedback-left" id="fromdate" 
        placeholder="MM/DD/YYYY" name="fromdate">
</div>
<div class="col-12 form-group has-feedback">
    <label>To <span class="text-danger">*</span></label>
    <input type="text" class="form-control has-feedback-left" id="todate" 
        placeholder="MM/DD/YYYY" name="todate">
</div>

Now I need to auto populate the number of days when user select the from date and to date to the below input value

<div class="col-12 form-group has-feedback">
    <label>Number of days <span class="text-danger">*</span></label>
    <input type="text" class="form-control has-feedback-left" name="numberdays" 
        id="numberdays" disabled>
</div>

I have been referring the bootstrap jquery daterangepicker forum and other internet sources for a solution but unfortunate. Appreciate if anyone could help.

It really looks like bootstrap date range picker works well with just one input for the range, rather than what you had there - an input for from date and another input for to date.

Just 1 input for the date range

If you can change your inputs to just one single input for the date range

<div class="col-12 form-group has-feedback">
    <label>From <span class="text-danger">*</span></label>
    <input type="text" class="form-control has-feedback-left" id="daterange" 
        name="daterange">
</div>

Then you can calculate the day difference very easily after initializing the range input with bootstrap date range picker:

$(function() {
    $('#daterange').daterangepicker();

    $('#daterange').on('apply.daterangepicker', function(ev, picker) {
        // picker.startDate and picker.endDate are already Moment.js objects.
        // You can use diff() method to calculate the day difference.
        $('#numberdays').val(picker.endDate.diff(picker.startDate, "days"));
    });
});

demo: https://jsfiddle.net/davidliang2008/ec2L749p/10/

If you have to have start and end date input

I would suggest to just use jquery datepicker for that because bootstrap date ranger picker doesn't work that well with multiple date inputs.

To use jquery datepicker, remember to include jquery as well as jquery-ui (also its css too).

You can make them as date range picker by:

$(function() {
    let $fromDate = $('#fromdate'),
        $toDate = $('#todate');

    $fromDate.datepicker().on('change', function(){
        $toDate.datepicker('option', 'minDate', $(this).val());
    });

    $toDate.datepicker().on('change', function(){
        $fromDate.datepicker('option', 'maxDate', $(this).val());
    });;
});

The last thing you need to do is just to have a function to calculate the date difference on their change event:

$(function() {
    let $fromDate = $('#fromdate'),
        $toDate = $('#todate'),
        $numberDays = $('#numberdays');

    $fromDate.datepicker().on('change', function(){
        $toDate.datepicker('option', 'minDate', $(this).val());

        $numberDays.val(calculateDateDiff($toDate.val(), $(this).val()));
    });

    $toDate.datepicker().on('change', function(){
        $fromDate.datepicker('option', 'maxDate', $(this).val());

        $numberDays.val(calculateDateDiff($(this).val(), $fromDate.val()));
    });

    function calculateDateDiff(endDate, startDate) {
        if (endDate && startDate) {
            let e = moment(endDate),
                s = moment(startDate);

            return e.diff(s, "days");
        }

        return null;
    }
});

demo: https://jsfiddle.net/davidliang2008/ec2L749p/20/

Omit weekends

I will use the demo using jquery datepicker because it supports disabling weekends on the date picker by just setting beforeShowDay property:

$fromDate.datepicker({
    beforeShowDay: $.datepicker.noWeekends
}).on('change', function(){
    $toDate.datepicker('option', 'minDate', $(this).val());

    $numberDays.val(calculateDateDiff($toDate.val(), $(this).val()));
});

$toDate.datepicker({
    beforeShowDay: $.datepicker.noWeekends
}).on('change', function(){
    $fromDate.datepicker('option', 'maxDate', $(this).val());

    $numberDays.val(calculateDateDiff($(this).val(), $fromDate.val()));
});

All weekends on the date picker are disabled:

And then you need to change the function calculateDateDiff() to ignore the weekends while doing the calculation. Here I am adding a third parameter called noWeekends to indicate whether we want the calculation to ignore weekends or not:

function calculateDateDiff(endDate, startDate, noWeekends) {
    if (endDate && startDate) {
        let e = moment(endDate),
            s = moment(startDate);

        if (!noWeekends) {
            return e.diff(s, "days");
        }

        let count = 0;
        for(let m = s; m.isBefore(e); m.add(1, 'days')) {
            if (m.isoWeekday() !== 6 && m.isoWeekday() !== 7) {
                count++;
            }
        }

        return count;
    }

    return null;
}

demo: https://jsfiddle.net/davidliang2008/ec2L749p/32/

Friendly Reminder

If you intend to post numberdays input back to the server, setting it as disabled won't work. You might consider setting it as readonly.