Auto-populate total day in textbox if choose from two dates

Question

I want to display total day in text box automatically if I choose from two dates, but I can not get it. If I don't use Javascript, it works. Datepicker can't work if haven't used Javascript. How can I do that?

This is my script:

<input class="form-control" onchange="cal()" placeholder="Choose Date "  type="text" id="example1" name="startdate" required="required" "/>
<input class="form-control" onchange="cal()" placeholder="Choose Date "  type="text" id="example2" name="enddate" required="required" disabled="disabled" "/>
<input class="form-control"  type="text"  id="numdays2" name="total_leave"/>  

This is java script:

<!--calendar Java script -->
<script type="text/javascript">              
$(document).ready(function () {         
    $('#example1').datePicker({
        format: "yyyy-mm-dd"
    });   
});                            
</script> 

<!-- Datepicker -->
<script type="text/javascript">              
$(document).ready(function () {         
    $('#example2').datePicker({
        format: "yyyy-mm-dd"
    });   
});   
</script>  

<!-- calculate leave total day -->
<script type="text/javascript">
function GetDays(){
    var dropdt = new Date(document.getElementById("example2").value);
    var pickdt = new Date(document.getElementById("example1").value);
    return parseInt((dropdt -(pickdt)) / (24 * 3600 * 1000))+1|| parseInt(1);                
}

function cal(){
    if(document.getElementById("example1")){
        document.getElementById("numdays2").value=GetDays();
    }  
}

</script> 

Answer 1

There are quite a few bits in your code that need changing / fixing, so here is a working example based on your original code.

<input class="form-control" placeholder="Choose Date "  type="text" id="example1" name="startdate" required="required" />
<input class="form-control" placeholder="Choose Date "  type="text" id="example2" name="enddate" required="required" />
<input class="form-control"  type="text"  id="numdays2" name="total_leave"/>  

 $(document).ready(function(){  

     $('#example1').datepicker({
       format: "yyyy-mm-dd",
       onSelect: function(){
         cal()
       } 
     });   

     $('#example2').datepicker({
       format: "yyyy-mm-dd",
       onSelect: function(){
         cal()
       } 
     });   

});   

function GetDays(){
    var dropdt = new Date(document.getElementById("example2").value);
    var pickdt = new Date(document.getElementById("example1").value);
    return parseInt((dropdt -(pickdt)) / (24 * 3600 * 1000))+1|| parseInt(1);                
}

function cal(){
    if(document.getElementById("example1")){
        document.getElementById("numdays2").value=GetDays();
    }  
}

Answer 2

Working Demo

changeDate event is triggered every time the date is selected or changed

DatePicker(Events)

HTML

<input  placeholder="Start Date " type="text" id="StartDate" />
<input  placeholder="End Date " type="text" id="EndDate" />
<input  type="text" id="datediff" />

JS

$('#StartDate,#EndDate').datepicker({
    format: "yyyy-mm-dd",
    autoclose: true,
});

$('#StartDate,#EndDate').datepicker().on('changeDate', function () {
    if ($('#StartDate').val() != '' && $('#EndDate').val() != '') {
        var date1 = new Date($('#StartDate').val());
        var date2 = new Date($('#EndDate').val());
        var timeDiff = date2.getTime() - date1.getTime();
        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
        $('#datediff').val(diffDays);
    }
})