如何自動生成動態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數組）； 這個對象將包含月份的名稱和一個周對象數組，它由周數和一周的第一個日期組成。

看看這個SlackBlitz 示例，其中使用KnockOutJS庫在上面的代碼中生成的數據顯示表格。