javascript - 如何自动生成动态moment.js？

Question

我们的想法是让一页成为月度表格，每一行都有周数和编辑选择。为此，我需要 moment.js 和 javascript 来生成表格。定义确切的年份并按月、周数和一周的第一天生成一个表。

如果你能帮助我，我将不胜感激。

这里我们使用 jsfiddle 和示例。

• > https://jsfiddle.net/n1039cme/1/

例子:

.table-bordered {
    border: 1px solid #dee2e6;
}
.table-bordered thead td, .table-bordered thead th {
    border-bottom-width: 2px;
}
.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}
.table-bordered td, .table-bordered th {
    border: 1px solid #dee2e6;
}
table.table thead th {
    border-top: none;
}
table.table td, table.table th {
    padding-top: 1.1rem;
    padding-bottom: 1rem;
}
.table td, .table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}
table td {
    font-size: .9rem;
    font-weight: 300;
}

Generate 2019 (target) year months, week number and first day automatically with moment.js. I'm gonna use php to make tables dynamically.</p>

<table id="tablePreview" class="table table-hover table-bordered">
<!--Table head-->
  <thead>
    <tr>
      <th>January</th>
      <th>Week first day</th>
      <th>Last Name</th>
      <th>Username</th>
      <th>Edit</th>
     
    </tr>
  </thead>
  <!--Table head-->
  <!--Table body-->
  <tbody>
    <tr>
      <th scope="row">Week number 1</th>
      <td>2019-01-01</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td><a href="/edit-link.php">Edit</a></td>
   
    </tr>
    <tr>
      <th scope="row">Week number 2</th>
      <td>2019-01-01</td>
      <td>Thornton</td>
      <td>-</td>
      <td><a href="/edit-link.php">Edit</a></td>

    </tr>
    <tr>
      <th scope="row">Week number 3</th>
      <td>2019-01-01</td>
      <td>the Bird</td>
      <td>@twitter</td>
      <td><a href="/edit-link.php">Edit</a></td>

    </tr>
  </tbody>
</table>
<br><br>
<table id="tablePreview" class="table table-hover table-bordered">
<!--Table head-->
  <thead>
    <tr>
      <th>February</th>
      <th>Week first day</th>
      <th>Last Name</th>
      <th>Username</th>
      <th>Edit</th>
     
    </tr>
  </thead>
  <!--Table head-->
  <!--Table body-->
  <tbody>
    <tr>
      <th scope="row">Week number 5</th>
      <td>2019-02-01</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td><a href="/edit-link.php">Edit</a></td>
   
    </tr>
    <tr>
      <th scope="row">Week number 6</th>
      <td>2019-02-01</td>
      <td>Thornton</td>
      <td>-</td>
      <td><a href="/edit-link.php">Edit</a></td>

    </tr>
    <tr>
      <th scope="row">Week number 7</th>
      <td>2019-02-01</td>
      <td>the Bird</td>
      <td>@twitter</td>
      <td><a href="/edit-link.php">Edit</a></td>

    </tr>
  </tbody>
</table>
<p>
etc...
</p>
</p>

有了 moment.js，这就是我所做的一切......

var months = [];

for( var i = 0; i < 12; i++ ){
months.push( new Date(0,i).toLocaleString({},{month:'long'}) ); 
}

console.log(months);

Answer 1

我很快为你草草了一些东西。这应该足以让你继续:

    var thisYear = 2018;
    var start = new Date("1/1/" + thisYear);
    var defaultStart = moment(start.valueOf());
    var weekNumber = 1;
    this.months = [];
    for (var i = 0; i < 12; i++) {
        var weeks = [];

        var currentMonth = defaultStart.month();

        var monthLimit = i + 1;

        if (defaultStart.month() == 11) {
            monthLimit = 0;
        }

        while (defaultStart.month() != monthLimit) {
            weeks.push(
                {
                    weekNumber: weekNumber,
                    firstDayOfWeek: defaultStart.format("MMM Do YYYY")
                }
            )
            weekNumber++;

            defaultStart.add(7, 'days')
        }
        this.months.push(
            {
                weeks: weeks,
                month: moment().month(currentMonth).format("MMMM")
            });
    }

这将为您创建一个包含 12 个对象的数组(months 数组)；该对象将包含月份的名称和一组周对象，其中包括周数和一周的第一个日期。

看看this SlackBlitz 示例，其中使用上述代码中使用 KnockOutJS 生成的数据显示表格图书馆。