Javascript return list of all dates in month and seperate mondays-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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 >${monday}</li>`).join('');
const allDays = days.map(day => `<li >${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>