Как автоматически генерировать динамический момент.js?

Question

Идея состоит в том, чтобы сделать одну страницу ежемесячной таблицей, и каждая строка будет иметь номера недель и редактировать выбор.Для этого мне нужен момент.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")
            });
    }

Это создаст для вас массив (массив months) из 12 объектов;этот объект будет содержать название месяца и массив объектов недели, который состоит из номера недели и первой даты недели.

Взгляните на этот пример SlackBlitz,где таблица отображается с использованием данных, сгенерированных в коде выше с использованием библиотеки KnockOutJS .