每个月与正确的一周对齐?

时间:2017-06-27 17:59:32

标签: javascript node.js express momentjs ejs

我正在创建一个日历应用程序,现在我正努力让自己的日子充满活力。

到目前为止,在后端,我有一个数组,它给了我每个月的天数。

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的新手。

1 个答案:

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