IE11 Javascript on-change event not working with html form element

Question

I'm making simple application for record leave dates. With this application I have to select start date and end date of the leave and then calculate all the business dates in between those two days. So far my codes working Chrome and Firefox perfectly. I'm using jQuery UI date-picker for select two dates and use second date-picker on-change event for count dates and display it inside html input box.

With IE this function is broken and after I set two dates using date time picker on-change event not firing

This is sample of my code:

<script type="text/javascript">
              $( function() {
                $( "#startd" ).datepicker({beforeShowDay: $.datepicker.noWeekends , dateFormat: 'yy-mm-dd'});
              } );
            
              $( function() {
                $( "#endd" ).datepicker({beforeShowDay: $.datepicker.noWeekends , dateFormat: 'yy-mm-dd' });
              } );

 function getBusinessDatesCount(startDate, endDate) {
    var count = 0;
    var curDate = startDate;
    while (curDate <= endDate) {
        var dayOfWeek = curDate.getDay();
        if(!((dayOfWeek == 6) || (dayOfWeek == 0)))
           count++;
        curDate.setDate(curDate.getDate() + 1);
    }
    return count;
}
            </script>
            
    
            <form action='reqprocess.php' method='post'>
                <table class='table table-hover table-responsive table-bordered'>
            <tr>
                        <td id="td2">Start</td>
                        <td><input type="text" name="datepicker" class='form-control' id="startd" required onchange="calnumofdays()" /></td>
                    </tr>
                      <tr>
                        <td id="td1">End</td>
                        <td><input type="text" name="datepicker2" class='form-control' id="endd" onchange="calnumofdays()" /></td>
                    </tr>
                     <tr>
                        <td>Days</td>
                        <td><input type="number" name='leavehmd' class='form-control' id="lhmd"/></td>
                    </tr>
                </table>
            </form>
            
    <script type="text/javascript">
    
            function calnumofdays() {           
           
            var startDate = $(startd).datepicker("getDate");
            var endDate = $(endd).datepicker("getDate");
        
            var numOfDates = getBusinessDatesCount(startDate, endDate);
            $('#lhmd').val(numOfDates);
            //alert(numOfDates);
            $('div#result').text(numOfDates);
          }
        </script>

How can I fix this? this code is working perfectly fine in chrome and firfox. And when I remove form tags in html it start to work in IE too.

Answer 1

edit these parts on calnumofdays and it will work...

function calnumofdays() {           

            var startDate = $("#startd").datepicker("getDate"); //edit these
            var endDate = $("#endd").datepicker("getDate"); //edit these

            var numOfDates = getBusinessDatesCount(startDate, endDate);
            $('#lhmd').val(numOfDates);
            //alert(numOfDates);
            $('div#result').text(numOfDates);
          }