Javascript return list of all dates in month and seperate mondays

Question

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

There's a few things here. 1) Feb dates is just start,end dates but with 01-feb->([01-mar]-1), so would use your existing code but determine the parameters. 2) you've used a `while` loop - are you ok with using `for` loop to process your array? Loop through, build an html string and `.append(html)` as you've suggested. This can be shortened using `.map` when you're ready. To determine if it's a Monday, use `dates_array[i].getDay() == 1`. — freedomn-m, Oct 20 '21 at 17:14

Godnyl Pula · Answer 1 · 2021-10-20T18:05:23.187

1

.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);

edited Oct 20 '21 at 18:05

answered Oct 20 '21 at 17:25

Godnyl Pula

85
7

Thank you very much for your help and time – RyanIs Oct 20 '21 at 18:17

score 1 · Answer 2 · answered Oct 20 '21 at 18:08

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>

So Hassan, could you explain why the use of const rather than var ? Just want to learn the difference — RyanIs, Oct 20 '21 at 18:23
You can refer this answer to understand the difference between var and const. https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var — Hassan Imam, Oct 20 '21 at 18:27

Javascript return list of all dates in month and seperate mondays

2 Answers2