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库生成的数据来显示表。

如何自动生成动态的moment.js？

1 个答案: