JQuery - Display a list of dates with 2 different date forms

Question

I need help to display list of dates which displays the date from 2 date forms.
Example :

value of 1st date form is 25-06-2021
value of 2nd date from is 28-06-2021

and will display like this :

<p>25 June 2021</p>
<p>26 June 2021</p>
<p>27 June 2021</p>
<p>28 June 2021</p>

I've try this

HTML

<input type="text" id="firstDate" name="firstDate"/>
<input type="text" id="secondDate" name="secondDate"/>

JQuery

$("#firstDate").datepicker({
}); 
$("#secondDate").datepicker({
onSelect: function () {
    myfunc();
}
}); 
function myfunc(){
var start= $("#firstDate").datepicker("getDate");
var end= $("#secondDate").datepicker("getDate");
days = (end- start) / (1000 * 60 * 60 * 24);
alert(Math.round(days));
}

However, it only counts the number of days, doesn't display the date list.

You can try the following solution at https://stackoverflow.com/questions/23795522/how-to-enumerate-dates-between-two-dates-in-moment — Adlan Arif Zakaria, Nov 11 '21 at 08:34

score 0 · Answer 1 · answered Nov 11 '21 at 10:16

You can append all date using while loop inside p tag. Here we just iterate loop till start date can not greater than end date and we store that date in array and then print.

<input type="text" id="firstDate" name="firstDate"/>
<input type="text" id="secondDate" name="secondDate"/>
<p id="results"></p>
    
    
    
    
    $("#firstDate").datepicker({
        }); 
        $("#secondDate").datepicker({
        onSelect: function () {
            myfunc();
        }
        }); 
        
        function myfunc(){
        var start = $("#firstDate").datepicker("getDate"),
                end = $("#secondDate").datepicker("getDate"),
                currentDate = new Date(start),dateList = [];
        
                while (currentDate <= end) {
                dateList.push(new Date(currentDate));
                currentDate.setDate(currentDate.getDate() + 1);
            }
            
            $('#results').html(dateList.join('<br> '));
        }
        
        $('#getBetween').on('click', function () {
            
        
            
        });

JQuery - Display a list of dates with 2 different date forms

1 Answers1