如果從兩個日期中進行選擇，則自動在文本框中填充全天

Question

如果要從兩個日期中選擇日期，我想在文本框中自動顯示總天數，但我無法獲取。 如果我不使用Javascript，它將起作用。 如果未使用Javascript， Datepicker將無法工作。 我怎樣才能做到這一點？

這是我的腳本：

<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"/>  

這是java腳本：

<!--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

您的代碼中有很多地方需要更改/修復，因此這是一個基於原始代碼的有效示例。

<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

工作演示

每次選擇或更改日期時都會觸發changeDate事件

DatePicker（事件）

的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);
    }
})