每个月与一周中的正确日子对齐？答案

【问题标题】：align each month with right days of the week?每个月与一周中的正确日子对齐？
【发布时间】：2017-06-27 17:59:32
【问题描述】：

我正在创建一个日历应用程序，现在我正试图让我的日子充满活力。

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

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>

现在我遇到的问题是每个月的所有天数都显示在一月以下。我是怎么做到的，所以每次我按下下一个按钮去下个月时，我的日子也会改变。也许这不是最好的方法。任何帮助都会很棒，因为您可以看到我是 Node.js 的新手。

【问题讨论】：

这真的很难帮助你，因为你正在做的事情根本不是我个人会做的事情。所以从技术上讲，你需要向我们展示使用 CodePen 或类似的东西的工作代码。我会亲自创建一个代表一个月的视图，并在每次滑动到两侧时渲染一个新视图，然后将其附加到不可见区域 - 一次提前一个月。换句话说 - 一次预加载一个月。

标签： javascript node.js express momentjs ejs

【解决方案1】：

我必须同意@Alexus；这不是我个人会做的事情。

但要回答您的问题，moment.js 有强大的方法来处理日期。

例如，moment#month(number|String) 可以更改月份。通过使用它，您可以像我在以下 sn-p 中所做的那样：

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

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"&gt;&lt;/script&gt;

这也适用于您的代码。 StackOverflow sn-ps 不支持 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>

【讨论】：