moment.js 时间轴选择：自然月、自然周随心选择

<br>

moment.js 是一款强大的 JavaScript 库，可轻松处理日期和时间。在众多应用场景中，时间轴可谓功能广泛，从可视化历史数据到提供交互式日历，均可大显身手。

为了让时间轴的功能更加强大，在给定时间点时，让用户可以切换查看自然月或自然周的时间轴，不仅实用性强，而且实现方式毫不费力。

那么，如何借助 moment.js 实现这一强大功能呢？且听我一一道来：

1. **确定时间范围：** 

   - 获取给定时间的本周开始时间和结束时间
   - 获取给定时间所在月份的开始时间和结束时间

2. **生成时间轴：** 

   - 自然月时间轴：以自然月为单位，生成一个包含所有日期的对象数组
   - 自然周时间轴：以自然周为单位，生成一个包含所有日期的对象数组

3. **渲染时间轴：** 

   - 将生成的时间轴渲染到页面中，使用户可以选择不同的时间段进行查看

function createMonthTimeline(date) {
const startDate = moment(date).startOf('month');
const endDate = moment(date).endOf('month');

const timeline = [];
while (startDate.isSameOrBefore(endDate)) {
timeline.push({
date: startDate.format('YYYY-MM-DD'),
day: startDate.format('D'),
week: startDate.format('W'),
month: startDate.format('MMMM'),
});
startDate.add(1, 'days');
}
return timeline;
}

function createWeekTimeline(date) {
const startDate = moment(date).startOf('week');
const endDate = moment(date).endOf('week');

const timeline = [];
while (startDate.isSameOrBefore(endDate)) {
timeline.push({
date: startDate.format('YYYY-MM-DD'),
day: startDate.format('D'),
week: startDate.format('W'),
month: startDate.format('MMMM'),
});
startDate.add(1, 'days');
}
return timeline;
}

function renderTimeline(timeline) {
const timelineContainer = document.getElementById('timeline-container');
timelineContainer.innerHTML = '';

timeline.forEach((day) => {
const timelineItem = document.createElement('div');
timelineItem.classList.add('timeline-item');

const dateHeader = document.createElement('h3');
dateHeader.textContent = `${day.date} (${day.day})`;

const weekNumber = document.createElement('p');
weekNumber.textContent = `Week ${day.week}`;

const monthName = document.createElement('p');
monthName.textContent = day.month;

timelineItem.appendChild(dateHeader);
timelineItem.appendChild(weekNumber);
timelineItem.appendChild(monthName);

timelineContainer.appendChild(timelineItem);

});
}

const dateInput = document.getElementById('date-input');
dateInput.addEventListener('change', (event) => {
const date = event.target.value;
const monthTimeline = createMonthTimeline(date);
const weekTimeline = createWeekTimeline(date);

renderTimeline(monthTimeline);

const monthButton = document.getElementById('month-button');
const weekButton = document.getElementById('week-button');

monthButton.addEventListener('click', () => {
renderTimeline(monthTimeline);
});

weekButton.addEventListener('click', () => {
renderTimeline(weekTimeline);
});
});

const today = moment().format('YYYY-MM-DD');
const timeline = createMonthTimeline(today);
renderTimeline(timeline);

<br>

利用以上方法，你便可轻松打造一个可自定义时间轴的工具，用户可以选择想要查看的自然月或自然周，获取相应时间范围内的日期，并以直观易懂的方式进行呈现。

通过这一功能，用户能够更方便地查看和分析特定时间段内的数据，有助于他们更好地理解和利用信息。

希望这个小诀窍对你有所帮助，若有其他问题或建议，欢迎留言，期待与你交流。