如何使用week类型input输入框实现多周选择功能

问题原因 #

原生HTML的<input type="week">组件本身不支持multiple属性，这是HTML标准的既定限制，所以直接添加该属性不会生效，无法直接实现多周选择能力。

可行实现方案 #

• 多实例叠加方案
  逻辑：维护一个动态的week输入框列表，用户点击「添加周」按钮时新增一个week输入框，提交时合并所有输入框的值即可，对原生能力依赖最强，兼容性最好。
  代码示例：

  <div id="weekContainer">
    <div class="week-item">
      <input type="week" name="weeks[]">
      <button type="button" class="remove-btn">删除</button>
    </div>
  </div>
  <button type="button" id="addWeekBtn">添加周</button>
  
  <script>
  const container = document.getElementById('weekContainer')
  const addBtn = document.getElementById('addWeekBtn')
  
  // 新增周选择框
  addBtn.addEventListener('click', () => {
    const item = document.createElement('div')
    item.className = 'week-item'
    item.innerHTML = `
      <input type="week" name="weeks[]">
      <button type="button" class="remove-btn">删除</button>
    `
    // 绑定删除逻辑
    item.querySelector('.remove-btn').addEventListener('click', () => {
      item.remove()
    })
    container.appendChild(item)
  })
  </script>
  

• 单输入框+已选列表封装
  逻辑：只保留一个原生week输入框，用户选中周后自动将值存入已选数组、清空输入框，同时在下方渲染已选的周列表，支持单独删除，体验更流畅。
  代码示例：

  <input type="week" id="weekSelector">
  <div id="selectedWeeks" style="margin: 10px 0;"></div>
  
  <script>
  const selector = document.getElementById('weekSelector')
  const selectedBox = document.getElementById('selectedWeeks')
  const selectedWeeks = new Set() // 用Set自动去重
  
  selector.addEventListener('change', () => {
    const val = selector.value
    if (!val || selectedWeeks.has(val)) return
    selectedWeeks.add(val)
    renderSelected()
    selector.value = '' // 清空输入框方便下一次选择
  })
  
  function renderSelected() {
    selectedBox.innerHTML = ''
    selectedWeeks.forEach(week => {
      const tag = document.createElement('span')
      tag.style = 'display: inline-block; margin: 0 8px 8px 0; padding: 4px 8px; background: #f0f0f0; border-radius: 4px;'
      tag.innerHTML = `${week} <button type="button" data-week="${week}" style="border:none;background:transparent;cursor:pointer;">×</button>`
      // 删除逻辑
      tag.querySelector('button').addEventListener('click', (e) => {
        selectedWeeks.delete(e.target.dataset.week)
        renderSelected()
      })
      selectedBox.appendChild(tag)
    })
  }
  </script>
  

• 使用UI组件库现成组件
  主流前端框架的UI组件库（比如Element UI、Ant Design、Vant等）的日期选择器普遍支持「周选择模式」+「多选」配置，直接调用对应组件的参数即可，不用自行封装基础逻辑，适合有对应技术栈的项目。

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