动态TextBox移除失效+DateTimePicker仅显示最近6天问题求助

嘿，我来帮你搞定这两个问题！咱们一步步来解决：

这个需求核心是给日期选择器设置有效的日期范围——今天作为最晚日期，往前推6天作为最早日期。根据你用的日期选择器类型，分两种情况处理：

如果你用的是HTML5原生日期输入框 #

直接通过JavaScript设置它的min和max属性就行：

// 获取今天的日期，格式化为YYYY-MM-DD
const today = new Date().toISOString().split('T')[0];
// 计算6天前的日期
const sixDaysAgo = new Date();
sixDaysAgo.setDate(sixDaysAgo.getDate() - 6);
const sixDaysAgoStr = sixDaysAgo.toISOString().split('T')[0];

// 给日期输入框设置范围
const dateInput = document.getElementById('your-datepicker-id');
dateInput.setAttribute('min', sixDaysAgoStr);
dateInput.setAttribute('max', today);

如果你用的是jQuery UI Datepicker #

初始化的时候配置minDate和maxDate参数，还可以用beforeShowDay来禁用超出范围的日期：

$(function() {
  const today = new Date();
  const sixDaysAgo = new Date(today);
  sixDaysAgo.setDate(today.getDate() - 6);

  $("#your-datepicker-id").datepicker({
    minDate: sixDaysAgo,
    maxDate: today,
    // 可选：给禁用的日期加样式
    beforeShowDay: function(date) {
      const formattedDate = $.datepicker.formatDate('yy-mm-dd', date);
      const minFormatted = $.datepicker.formatDate('yy-mm-dd', sixDaysAgo);
      const maxFormatted = $.datepicker.formatDate('yy-mm-dd', today);
      return [formattedDate >= minFormatted && formattedDate <= maxFormatted, ''];
    }
  });
});

这个问题大多是因为事件绑定的时机不对——动态生成的按钮没法直接绑定事件，得用「事件委托」的方式，把事件绑定到静态存在的父容器上。

下面是完整的示例代码，包含添加和移除逻辑：

<!-- 静态容器，用来放所有动态生成的TextBox -->
<div id="textbox-container"></div>
<button id="add-btn">添加TextBox</button>

<script>
// 点击添加按钮，生成新的TextBox和移除按钮
document.getElementById('add-btn').addEventListener('click', function() {
  const container = document.getElementById('textbox-container');
  // 创建一个包裹层，方便后续移除整个组
  const wrapper = document.createElement('div');
  wrapper.className = 'textbox-group';

  // 创建TextBox
  const textBox = document.createElement('input');
  textBox.type = 'text';
  textBox.placeholder = '输入内容...';

  // 创建移除按钮
  const removeBtn = document.createElement('button');
  removeBtn.className = 'remove-btn';
  removeBtn.textContent = '移除';

  // 把元素添加到页面
  wrapper.appendChild(textBox);
  wrapper.appendChild(removeBtn);
  container.appendChild(wrapper);
});

// 事件委托：给父容器绑定点击事件，处理移除逻辑
document.getElementById('textbox-container').addEventListener('click', function(e) {
  // 判断点击的是移除按钮
  if (e.target.classList.contains('remove-btn')) {
    // 找到对应的包裹层并移除
    e.target.closest('.textbox-group').remove();
  }
});
</script>

如果是用jQuery的话，代码会更简洁：

// 添加TextBox
$('#add-btn').click(function() {
  const newTextBox = `
    <div class="textbox-group">
      <input type="text" placeholder="输入内容...">
      <button class="remove-btn">移除</button>
    </div>
  `;
  $('#textbox-container').append(newTextBox);
});

// 事件委托实现移除
$('#textbox-container').on('click', '.remove-btn', function() {
  $(this).closest('.textbox-group').remove();
});

核心思路就是：不要给每个动态生成的按钮单独绑定事件，而是把事件绑定到一开始就存在的父元素上，通过判断点击的目标来处理对应的移除操作。

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