Преобразование значений между двумя датами «контактной формы 7» в javascript / jquery и выходной диапазон этих дат

Question

ОБНОВЛЕНИЕ: Работает, хотя и выглядит не очень чистым ... Если кто-то может сделать его чище, тогда пожалуйста

<div class="column one-fourth" id="date-start">[date* date-start date-format:dd/mm/yy min:today+1days placeholder "Date start"] </div> 
<div class="column one-fourth" id="date-end">[date* date-end placeholder "Date end"] </div>

<p>Start date: <span id="kp1">date</span> <br>
End date: <span id="kp2">date</span> <br>
Number of days: <span id="days">days</span> </p>


<!-- Calculating & stuff -->

<script>
         var date1, date2;
         date1 = document.getElementById("date-start").addEventListener("change", function() {
    input1 = this.value;
    // Value which is needed for a calculation
    var dateEntered1 = new Date(input1);
    dat1 = Math.abs(dateEntered1.getTime());
    document.getElementById("kp1").innerHTML = input1;
});
         date2 = document.getElementById("date-end").addEventListener("change", function() {
    input2 = this.value;
    // Value which is needed for a calculation
    var dateEntered2 = new Date(input2);
    dat2 = Math.abs(dateEntered2.getTime());
    document.getElementById("kp2").innerHTML = input2;

    // Calculating difference between dates
     var timeDiff = (dat2 - dat1) + 1;
     var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 
     console.log(diffDays);
    document.getElementById("days").innerHTML = diffDays;
});</script>

СТАРЫЙ:

Я использую контактную форму 7 обычных HTML5-кодов даты (не плагин datepicker).Один на дату начала.Еще один на дату окончания.Во-первых, мне нужно как-то получить эти значения.Затем мне нужно вывести число, которое рассчитывается между этими двумя значениями.

Например, если я выберу 21.10.2018 в качестве даты начала.И 23.10.2018 для даты окончания, тогда мне нужно вывести результат как «Количество дней: 3 ».

Проблема в том, что я не знаю, как получить это значение между двумядаты.

Я нашел кое-что отсюда, но я знаю, что в нем отсутствуют некоторые важные детали.

В любом случае, контактная форма 7:

<div class="column one-fourth" id="date-start">[date* date-start date-format:dd/mm/yy min:today+1days placeholder "Date start"] </div> 
<div class="column one-fourth" id="date-end">[date* date-end placeholder "Date end"] </div>

<script>
         var date1, date2;
         date1 = document.getElementById("date-start");
         document.write(""+date1);
         date2 = document.getElementById("date-end");
         document.write("<br>"+date2);
         // get total seconds between two dates
         var res = Math.abs(date1 - date2) / 1000;
         var days = Math.floor(res / 86400);
         document.write("<br>Number of days: "+days);
</script>

Answer 1

Это не чисто, но работает.

<div class="column one-fourth">[date* date-start id:date-start date-format:dd/mm/yy min:today+1days placeholder "Date start"] </div> 
<div class="column one-fourth">[date* date-end id:date-end placeholder "Date end"] </div>

<p>Start date: <span id="kp1">date</span> <br>
End date: <span id="kp2">date</span> <br>
Number of days: <span id="days">days</span> </p>


<!-- Calculating & stuff -->

<script>
         var date1, date2;
         date1 = document.getElementById("date-start").addEventListener("change", function() {
    input1 = this.value;
    // Value which is needed for a calculation
    var dateEntered1 = new Date(input1);
    dat1 = Math.abs(dateEntered1.getTime());
    document.getElementById("kp1").innerHTML = input1;
});
         date2 = document.getElementById("date-end").addEventListener("change", function() {
    input2 = this.value;
    // Value which is needed for a calculation
    var dateEntered2 = new Date(input2);
    dat2 = Math.abs(dateEntered2.getTime());
    document.getElementById("kp2").innerHTML = input2;

    // Calculating difference between dates
     var timeDiff = (dat2 - dat1) + 1;
     var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 
     console.log(diffDays);
    document.getElementById("days").innerHTML = diffDays;
});</script>