如何使用momentjs和TypeScript实现日历矩阵及日期选择器功能？

Hey folks! I’ve built date picker components a bunch of times, and one reliable approach for generating the calendar grid (the core of any date picker) uses Moment.js and TypeScript. Let me walk you through how to do it:

核心逻辑拆解 #

A calendar grid needs to show all days of the target month, plus padding days from the previous/next month to fill a 6x7 grid (since some months start on a late weekday and need extra rows to cover all days). Here’s how we’ll break it down:

• Calculate the first and last day of the target month
• Figure out how many padding days we need from the previous month (to fill the first row)
• Calculate padding days from the next month to fill the final row
• Generate a flat array of all these days, structured with metadata for rendering

完整TypeScript实现 #

First, let’s define a type to represent each day in the grid—this will make our data easier to work with when rendering:

import moment from 'moment';

// 定义日历天的结构，包含渲染需要的元数据
type CalendarDay = {
  date: moment.Moment;
  isCurrentMonth: boolean;
  isToday: boolean;
  isSelected?: boolean;
};

/**
 * 生成指定月份的日历矩阵（6行7列）
 * @param targetDate 目标月份的任意日期，用于定位月份
 * @param selectedDate 当前选中的日期（可选）
 */
export const generateCalendarMatrix = (
  targetDate: moment.Moment,
  selectedDate?: moment.Moment
): CalendarDay[][] => {
  const targetMonth = targetDate.clone().startOf('month');
  const lastDayOfMonth = targetDate.clone().endOf('month');
  
  // 获取当月第一天是周几（0=周日，6=周六，根据你的需求调整）
  const firstDayWeekday = targetMonth.day();
  // 需要从上个月补的天数
  const prevMonthPaddingDays = firstDayWeekday;
  
  // 计算需要到下个月补的天数，确保总天数是42（6*7）
  const totalDaysNeeded = 42;
  const currentMonthDays = lastDayOfMonth.date();
  const nextMonthPaddingDays = totalDaysNeeded - (prevMonthPaddingDays + currentMonthDays);
  
  // 生成所有日期的数组
  const allDays: CalendarDay[] = [];
  
  // 添加上个月的补位日期
  for (let i = prevMonthPaddingDays - 1; i >= 0; i--) {
    const date = targetMonth.clone().subtract(i + 1, 'days');
    allDays.push({
      date,
      isCurrentMonth: false,
      isToday: date.isSame(moment(), 'day'),
      isSelected: selectedDate?.isSame(date, 'day')
    });
  }
  
  // 添加当月的日期
  for (let i = 1; i <= currentMonthDays; i++) {
    const date = targetMonth.clone().date(i);
    allDays.push({
      date,
      isCurrentMonth: true,
      isToday: date.isSame(moment(), 'day'),
      isSelected: selectedDate?.isSame(date, 'day')
    });
  }
  
  // 添加下个月的补位日期
  for (let i = 1; i <= nextMonthPaddingDays; i++) {
    const date = lastDayOfMonth.clone().add(i, 'days');
    allDays.push({
      date,
      isCurrentMonth: false,
      isToday: date.isSame(moment(), 'day'),
      isSelected: selectedDate?.isSame(date, 'day')
    });
  }
  
  // 将一维数组转为6行7列的矩阵
  const matrix: CalendarDay[][] = [];
  while (allDays.length) {
    matrix.push(allDays.splice(0, 7));
  }
  
  return matrix;
};

如何使用这个函数 #

Once you’ve got the function set up, you can use it to generate the grid for any month, then render it in your UI:

// 生成2024年5月的日历矩阵，选中5月15日
const may2024 = moment('2024-05-01');
const selectedDate = moment('2024-05-15');
const calendarMatrix = generateCalendarMatrix(may2024, selectedDate);

// 渲染时（以React为例，其他框架逻辑类似）
calendarMatrix.forEach(row => {
  row.forEach(day => {
    // 根据isCurrentMonth设置不同的文字颜色
    // 根据isToday添加高亮样式
    // 根据isSelected添加选中样式
    console.log(day.date.format('YYYY-MM-DD'), day.isCurrentMonth);
  });
});

关键注意事项 #

• Weekday Start: The code uses Sunday as the first day of the week (moment’s default). If you need Monday as the start, adjust the firstDayWeekday calculation—you can use targetMonth.isoWeekday() instead (1=Monday, 7=Sunday).
• Moment.js Alternatives: If you prefer not to use Moment.js, you can adapt this logic with native Date objects or libraries like date-fns, but the core grid generation logic stays the same.
• Performance: This function creates clones of moment objects, which is fine for most use cases. If you’re dealing with extreme performance requirements, you can optimize by reusing date objects or using lighter weight date utilities.

内容的提问来源于stack exchange，提问作者prespic