I wonder if someone can help me, I've done my best in trying to get as far as I can, but some help would really be great, if not help, then just some advice, I'm slowly learning.
As advice from someone, I have tried to include as much of my code as possible.
So I have the following code
var my_dates = function(start, end)
{
var start = new Date(start);
var end = new Date(end);
var arr = new Array();
var dt = new Date(start);
while (dt <= end)
{
arr.push(new Date(dt));
dt.setDate(dt.getDate() + 1);
}
return arr;
}
var dates_array = my_dates('2021-02-02', '2021-02-23');
and if I do console.log(dates_array ) it returns a list of dates between the two defined dates, and this is great.
If you think my code is over the top, I'm open to learning a better way.
But what I wanted to do, is expand this, so rather than returning dates between those 2 dates, so in the case of Feb, it would return all dates starting from the 1st and up until the 28th.
I then have this HTML
<div id="start_dates">
<ul class="monday_dates"></ul>
</div>
<div id="all_dates">
<ul class="all_dates"></ul>
</div>
and then using jQuery, I wanted to slot every Monday as a <li> into the .monday_dates <ul>, I assume something like $('#start_dates .monday_dates').append()
And then put a complete list of all dates as a <li> into the .all_dates <ul>, I assume something like $('#all_dates .all_dates').append()
So the HTML source would look something like
<div id="start_dates">
<ul class="monday_dates">
<li class="mon">01/02/2021</li>
<li class="mon">08/02/2021</li>
<li class="mon">15/02/2021</li>
<li class="mon">22/02/2021</li>
</ul>
</div>
<div id="all_dates">
<ul class="all_dates">
<li class="day">01/02/2021</li>
<li class="day">02/02/2021</li>
<li class="day">03/02/2021</li>
...
<li class="day">26/02/2021</li>
<li class="day">27/02/2021</li>
<li class="day">28/02/2021</li>
</ul>
</div>
Can anyone help? Or advise.
Thank you, I appreciate your time very much
You can generate all dates of a month using a while loop and add only dates whose getDay() value is 1 as monday dates.
Then using append() you can add to your html.
const getDaysInMonth = (month, year) => {
const date = new Date(year, month, 1);
const days = [];
const mondays = [];
while (date.getMonth() === month) {
const dateString = new Date(date).toLocaleDateString('en-GB')
if(date.getDay() === 1) {
mondays.push(dateString);
}
days.push(dateString);
date.setDate(date.getDate() + 1);
}
return {days, mondays};
}
const {days, mondays} = getDaysInMonth(1, 2021);
const allMonday = mondays.map(monday => `<li class="mon">${monday}</li>`).join('');
const allDays = days.map(day => `<li class="day">${day}</li>`).join('');
$('#start_dates .monday_dates').append(allMonday);
$('#all_dates .all_dates').append(allDays);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Only Mondays:
<div id="start_dates">
<ul class="monday_dates"></ul>
</div>
All Days:
<div id="all_dates">
<ul class="all_dates"></ul>
</div>.getDay return 1 for monday and respectively for other days
<div id="start_dates"></div>
elmRef = document.querySelector("#start_dates");
ulRef = document.createElement("ul");
for (i = 0; i < dates_array.length; i++) {
if (dates_array[i].getDay() == 1) {
li = document.createElement("li");
li.append(dates_array[i].toLocaleString());
ulRef.append(li)
}
}
elmRef.append(ulRef);