jquery获取一周一个月的日期

admin 2026年02月10日 18:56 103 0

使用jQuery获取一周或一个月的日期，需结合JavaScript的Date对象处理日期逻辑，获取一周日期时，可先通过当前日期的getDay()确定星期几（如0为周日），计算周期起始日（如上周日至本周日），循环生成7天日期数组；获取一个月日期时，需获取当月首日及最后一天，生成该月所有日期，并补充前后不足部分（如日历显示的上月末、下月初日期），日期格式化可通过split、slice等方法处理，最终结合jQuery遍历输出或绑定到DOM，核心思路是利用Date对象计算周期范围，生成日期数组后再进行格式化与展示。

使用jQuery高效获取一周及一个月的日期

在Web开发中，日期处理是常见需求，例如生成周历、月历、数据筛选等功能，虽然jQuery本身不提供专门的日期处理API，但结合JavaScript的Date对象和jQuery的DOM操作能力，可以高效实现"获取一周/一个月的日期"并渲染到页面，本文将详细介绍具体实现方法,包含代码示例和实用技巧。

获取一周的日期

需求分析

获取一周的日期通常需要明确"一周的起始日"（国内习惯以周一为起始，国际通用以周日为起始），并生成从起始日开始连续7天的日期数组,核心步骤包括：

确定当前日期所属周的起始日；
循环生成7天的日期对象；
格式化日期并渲染到页面。

实现代码

核心函数：获取一周日期（以周一为起始）

/**
 * 获取指定日期所在周的日期数组（周一至周日）
 * @param {Date} date - 指定日期，默认为当前日期
 * @returns {Array} - 日期数组，每个元素为Date对象
 */
function getWeekDates(date) {
    date = date || new Date();
    const day = date.getDay(); // 0（周日）到6（周六）
    const diff = date.getDate() - (day === 0 ? 6 : day - 1); // 计算周一的日期
    const startDate = new Date(date);
    startDate.setDate(diff);
    const dates = [];
    for (let i = 0; i < 7; i++) {
        const currentDate = new Date(startDate);
        currentDate.setDate(startDate.getDate() + i);
        dates.push(currentDate);
    }
    return dates;
}

使用jQuery渲染一周日期

假设HTML中有一个无序列表<ul id="week-list"></ul>,我们可以用jQuery将日期数组渲染为列表项：

// 获取一周日期并渲染
const weekDates = getWeekDates();
const $weekList = $('#week-list');
weekDates.forEach(date => {
    const formattedDate = formatDate(date); // 格式化日期（见下文）
    const $li = $('<li>').text(formattedDate).addClass('date-item');
    $weekList.append($li);
});
// 为日期项添加点击事件和交互效果
$('.date-item').on('click', function() {
    const selectedDate = $(this).text();
    // 移除其他项的选中状态
    $('.date-item').removeClass('selected');
    // 添加当前项的选中状态
    $(this).addClass('selected');
    console.log(`你选择了：${selectedDate}`);
});

日期格式化辅助函数

/**
 * 格式化日期为 YYYY-MM-DD
 * @param {Date} date - 日期对象
 * @returns {string} - 格式化后的日期字符串
 */
function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}
/**
 * 增强版日期格式化函数
 * @param {Date} date - 日期对象
 * @param {string} format - 格式模板，如 'YYYY年MM月DD日'
 * @returns {string} - 格式化后的日期字符串
 */
function formatDateWithTemplate(date, format = 'YYYY-MM-DD') {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    const weekDay = weekDays[date.getDay()];
    return format
        .replace('YYYY', year)
        .replace('MM', month)
        .replace('DD', day)
        .replace('WW', weekDay);
}

关键点说明

起始日配置：若需以周日为起始，只需修改diff的计算逻辑：
```
const diff = date.getDate() - day;
```
Date对象注意事项：setDate()会直接修改原日期对象，需通过new Date()创建副本避免污染原始数据。
性能优化：对于大量日期处理，可以考虑使用数组缓存或预计算,减少重复创建Date对象的开销。
国际化支持：在实际项目中，需要考虑不同地区的日期格式和起始日习惯,可以添加配置参数来适应不同需求。

获取一个月的日期

需求分析

获取一个月的日期需要考虑以下因素：

确定月份的第一天和最后一天
计算该月包含多少天
处理跨月的周（即当月第一天和最后一天可能不在周一或周日）
生成完整的日历视图数据

实现代码

核心函数：获取一个月日期

/**
 * 获取指定日期所在月的日期数组（包含前后补全的日期）
 * @param {Date} date - 指定日期，默认为当前日期
 * @param {number} startDay - 每周起始日（0=周日，1=周一，默认为1）
 * @returns {Array} - 日期数组，每个元素为Date对象
 */
function getMonthDates(date, startDay = 1) {
    date = date || new Date();
    const year = date.getFullYear();
    const month = date.getMonth();
    // 获取当月第一天
    const firstDay = new Date(year, month, 1);
    // 获取当月最后一天
    const lastDay = new Date(year, month + 1, 0);
    // 计算日历开始日期（可能是上个月的日期）
    const calendarStart = new Date(firstDay);
    const firstDayOfWeek = firstDay.getDay();
    const diff = firstDayOfWeek >= startDay 
        ? firstDayOfWeek - startDay 
        : 7 - (startDay - firstDayOfWeek);
    calendarStart.setDate(firstDay.getDate() - diff);
    // 计算日历结束日期（可能是下个月的日期）
    const calendarEnd = new Date(lastDay);
    const lastDayOfWeek = lastDay.getDay();
    const endDiff = lastDayOfWeek >= startDay 
        ? 6 - (lastDayOfWeek - startDay) 
        : startDay - lastDayOfWeek - 1;
    calendarEnd.setDate(lastDay.getDate() + endDiff);
    // 生成日期数组
    const dates = [];
    const currentDate = new Date(calendarStart);
    while (currentDate <= calendarEnd) {
        dates.push(new Date(currentDate));
        currentDate.setDate(currentDate.getDate() + 1);
    }
    return dates;
}

使用jQuery渲染月历

// 渲染月历视图
function renderMonthCalendar(date) {
    const $calendar = $('#calendar');
    $calendar.empty();
    const monthDates = getMonthDates(date);
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    // 添加月份标题
    $calendar.append($('<h3>').text(`${year}年${month}月`));
    // 添加星期标题
    const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
    const $weekHeader = $('<div>').addClass('week-header');
    weekDays.forEach(day => {
        $weekHeader.append($('<div>').text(day));
    });
    $calendar.append($weekHeader);
    // 添加日期格子
    const $weekContainer = $('<div>').addClass('week-container');
    let currentWeek = $('<div>').addClass('week');
    monthDates.forEach(date => {
        const isCurrentMonth =