Javascript返回所有以月为单位的日期列表和单独的星期一

Question

我想知道是否有人可以帮助我，我已经尽了最大的努力，但是一些帮助真的很好，如果不是帮助，那么只是一些建议，我正在慢慢学习。

作为某人的建议，我已经尝试尽可能多地包含我的代码。

所以我有下面的代码

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

，如果我执行console.log(dates_array )，它返回两个定义日期之间的日期列表，这很好。

如果你认为我的代码太过了，我愿意学习更好的方法。

但是我想做的是展开这个，所以不是返回这两个日期之间的日期，所以在Feb的情况下，它将返回从1号开始直到28号的所有日期。

然后是这个HTML

<div id="start_dates">
<ul class="monday_dates"></ul>
</div>
<div id="all_dates">
<ul class="all_dates"></ul>
</div>

然后使用jQuery，我想将每个星期一作为<li>插入。monday_dates<ul>，我假设是$('#start_dates .monday_dates').append()

然后将所有日期的完整列表作为<li>放入。all_dates<ul>，我假设是$('#all_dates .all_dates').append()

那么HTML源代码看起来就像

<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>

有人能帮忙吗?或建议。

谢谢你，我非常感谢你的时间

Answer 1

。getDay返回1，对于星期一和其他日期分别

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

Answer 2

您可以使用while循环生成一个月的所有日期，并且只将getDay()值为1的日期添加为monday日期。然后使用append()你可以添加到你的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>