我正在创建一个日历应用程序,现在我正努力让自己的日子充满活力。
到目前为止,在后端,我有一个数组,它给了我每个月的天数。
const DaysInEachMonth = [
moment('2017-01').daysInMonth(),
moment('2017-02').daysInMonth(),
moment('2017-03').daysInMonth(),
moment('2017-04').daysInMonth(),
moment('2017-05').daysInMonth(),
moment('2017-06').daysInMonth(),
moment('2017-07').daysInMonth(),
moment('2017-08').daysInMonth(),
moment('2017-09').daysInMonth(),
moment('2017-10').daysInMonth(),
moment('2017-11').daysInMonth(),
moment('2017-12').daysInMonth()
];
在我的ejs文件中,我使用DaysInEachMonth来循环播放天数。
<ul id="days">
<% for(var i = 0; i <= 11; i++) { %>
<% var n = DaysInEachMonth[i] %>
<% for(var j=1; j <= n; j++) { %>
<li> <%= j %> </li>
<% } %>
<% } %>
</ul>
现在我遇到的问题是每个月的所有日子都显示在1月份。我怎么做到这一点每次按下一个按钮去下个月我的日子也会改变。也许这不是最好的方式。任何帮助都会很棒,因为你可以看到我是Node的新手。
答案 0 :(得分:1)
我必须同意@Alexus;这不是我个人会做的事情。
但是要回答你的问题,moment.js
有强大的方法来操纵日期。
例如,moment#month(number|String)
可以更改月份。通过使用它,你可以像我在下面的片段中那样做:
// Let's just set `nthMonth` to the 10th month for this example.
var nthMonth = 10;
// This gets the month November. (the tenth month when starting from 0)
var month = moment().month(nthMonth);
// This gets the amount of days in November
var daysInMonth = month.daysInMonth();
// Using the moment#format function, we can get a human-readable string from the date.
// By using the format 'MMMM', we only get the name of the month.
var monthName = month.format('MMMM')
console.log('Moment.JS Example:');
console.log(' Nth month:', nthMonth)
console.log('Name of month:', monthName)
console.log('Days in month:', daysInMonth)
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
这也适用于您的代码。 StackOverflow片段不支持EJS,但我认为您可以看到它是如何工作的:
// And just for your code:
var m = moment();
var days = $('#days');
for (var i = 0; i < 11; i++) {
m.month(i);
days.append(`<li class="month">${m.format('MMMM')}</li>`);
var n = m.daysInMonth();
for (var j = 1; j <= n; j++) {
// We could use this code to show only the numbers.
//days.append(`<li>${j}</li>`);
// Or we use this code to make it a bit fancier.
days.append(`<li>${m.date(j).format('dddd Do')}</li>`);
}
}
#days > li {
list-style-type: none;
}
.month {
font-weight: bold;
margin-top: .5em
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="days">
</ul>