Svelte/原生JS实现多日期选择咨询：无需依赖jQuery

问题描述 #

我当前使用如下代码实现了单日期选择器：

<input type="date" bind:value={date} on:select={newDateSelected} on:change={newDateSelected}>

我希望实现多日期选择功能（类似某jQuery日期选择器的multiple标签页效果），但不想引入jQuery，请问能否通过原生JS或Svelte实现？

一、原生JS实现方案 #

核心思路是用原生日期输入框配合容器展示已选日期，通过数组维护选中日期集合，处理添加、去重和删除逻辑。

<!-- HTML结构 -->
<div class="multi-date-picker">
  <input type="date" id="dateInput">
  <div id="selectedDates" class="selected-dates"></div>
</div>

<style>
.selected-dates {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.date-tag {
  padding: 4px 8px;
  background: #e0e0e0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.date-tag button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
}
</style>

<script>
const dateInput = document.getElementById('dateInput');
const selectedDatesContainer = document.getElementById('selectedDates');
let selectedDates = [];

// 处理日期选择
dateInput.addEventListener('change', () => {
  const selectedDate = dateInput.value;
  if (!selectedDate || selectedDates.includes(selectedDate)) return;
  
  selectedDates.push(selectedDate);
  renderSelectedDates();
  dateInput.value = ''; // 清空输入框方便继续选择
});

// 渲染已选日期标签
function renderSelectedDates() {
  selectedDatesContainer.innerHTML = '';
  selectedDates.forEach(date => {
    const tag = document.createElement('div');
    tag.className = 'date-tag';
    tag.innerHTML = `
      <span>${formatDate(date)}</span>
      <button onclick="removeDate('${date}')">&times;</button>
    `;
    selectedDatesContainer.appendChild(tag);
  });
}

// 格式化日期为中文易读格式
function formatDate(dateStr) {
  const date = new Date(dateStr);
  return date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' });
}

// 删除指定日期
function removeDate(dateToRemove) {
  selectedDates = selectedDates.filter(date => date !== dateToRemove);
  renderSelectedDates();
}
</script>

二、Svelte实现方案 #

利用Svelte的响应式特性，通过数组维护选中日期，代码更简洁，逻辑更清晰：

<script>
  let selectedDates = [];
  let tempDate = '';

  // 添加日期（自动去重）
  function addDate() {
    if (!tempDate || selectedDates.includes(tempDate)) return;
    selectedDates = [...selectedDates, tempDate];
    tempDate = '';
  }

  // 删除指定日期
  function removeDate(date) {
    selectedDates = selectedDates.filter(d => d !== date);
  }

  // 格式化日期
  function formatDate(dateStr) {
    const date = new Date(dateStr);
    return date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' });
  }
</script>

<div class="multi-date-picker">
  <input 
    type="date" 
    bind:value={tempDate}
    on:change={addDate}
    placeholder="选择日期"
  />
  <div class="selected-dates">
    {#each selectedDates as date}
      <div class="date-tag">
        <span>{formatDate(date)}</span>
        <button on:click={() => removeDate(date)}>&times;</button>
      </div>
    {/each}
  </div>
</div>

<style>
.multi-date-picker {
  margin: 1rem;
}
.selected-dates {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.date-tag {
  padding: 4px 8px;
  background: #e0e0e0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.date-tag button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}
input[type="date"] {
  padding: 4px;
}
</style>

补充说明 #

• 两种方案都自带日期去重逻辑，避免重复选择
• 可按需扩展功能：比如限制最大选择数量、禁用指定日期范围、自定义日历面板样式等

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