求助：如何限制动态文本框最多5个并让日期选择器仅显示当前周

嘿，我来帮你解决这两个头疼的问题！你提到的动态文本框数量限制和日期选择器只显示当前周的需求，我整理了具体的代码方案，你可以直接参考调整：

之前的代码应该是没加数量判断逻辑，导致可以无限添加。我们只需要在点击添加按钮时，先统计当前已生成的动态项数量，小于5的时候才允许新增，否则给出提示。

假设你的动态项都放在一个id为dynamicContainer的容器里，每个动态项有dynamic-item类，添加按钮id是addBtn，代码可以这么写：

$("#addBtn").click(function() {
    // 统计当前已有的动态项数量
    var currentItemCount = $("#dynamicContainer .dynamic-item").length;
    
    if (currentItemCount < 5) {
        // 生成新的动态文本框和日期选择器容器
        var newDynamicItem = '<div class="dynamic-item">' +
            '<input type="text" class="dynamic-input" placeholder="请输入内容">' +
            '<input type="text" class="date-picker" placeholder="选择日期">' +
            '</div>';
        
        // 添加到容器中
        $("#dynamicContainer").append(newDynamicItem);
        
        // 初始化新添加的日期选择器（关键！不然新的日期选择器不会生效）
        initWeekDatePicker($(".date-picker:last"));
    } else {
        alert("最多只能添加5个项目哦～");
    }
});

从你的描述来看，应该是用的jQuery UI Datepicker（毕竟引入了jQuery）。我们可以通过设置日期范围、禁用非当前周日期，以及隐藏月份/年份切换按钮来实现只显示当前周的效果。

先写一个初始化日期选择器的通用函数：

function initWeekDatePicker($pickerElement) {
    // 获取当前日期
    const today = new Date();
    // 计算当前周的周一（这里以周一作为一周的起始，若你习惯周日起始可自行调整）
    const dayOfWeek = today.getDay();
    const mondayOfWeek = new Date(today);
    mondayOfWeek.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1));
    // 计算当前周的周日
    const sundayOfWeek = new Date(mondayOfWeek);
    sundayOfWeek.setDate(mondayOfWeek.getDate() + 6);

    $pickerElement.datepicker({
        // 限制可选日期范围为当前周
        minDate: mondayOfWeek,
        maxDate: sundayOfWeek,
        // 双重保险：只允许选择当前周内的日期
        beforeShowDay: function(date) {
            return [date >= mondayOfWeek && date <= sundayOfWeek, ''];
        },
        // 隐藏月份和年份切换按钮，禁止用户切换到其他周/月
        changeMonth: false,
        changeYear: false,
        // 默认选中当天日期
        defaultDate: today,
        // 自定义日期格式，可根据你的需求修改
        dateFormat: 'yy-mm-dd'
    });
}

额外注意事项 #

• 确保你已经引入了jQuery UI Datepicker的相关样式和脚本文件（这是使用该日期选择器的必要依赖），如果之前没加，要补充到页面中。
• 页面加载完成后，别忘了初始化已有的日期选择器：

$(document).ready(function() {
    // 初始化页面上已有的日期选择器
    $(".date-picker").each(function() {
        initWeekDatePicker($(this));
    });
});

把这些代码整合到你的JSP页面中，应该就能解决你遇到的两个问题啦！

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