如何在同一输入中选择多个日期？ [关闭]答案

【问题标题】：How can I select multiple dates in the same input? [closed]如何在同一输入中选择多个日期？ [关闭]
【发布时间】：2022-01-20 05:17:00
【问题描述】：

我需要管理“课程”可用的日期。我有一个简单的输入数据如下：

 <input type="date" name="data" id="data">

如何在同一输入中同时选择多个日期。

我可以设置开始日期和结束日期，但我想要更具体。提前致谢。

【问题讨论】：

标签： javascript html css date input

【解决方案1】：

最好使用一个按钮，在保存之前将日期保存到数组中......可能是这样的吗？

document.querySelector("button").addEventListener("click", function() {
  const sel = document.querySelector("select");
  const d = document.querySelector("#date").value;
  
  if (d === null || d === undefined)
  {
    alert("Select a date first.");
  }
  else
  {
    sel.innerHTML += `<option value="${d}">${d}</option>`;
  }
});

// Later on, post the option values from the select list to your backend:

document.querySelector("#finish").addEventListener("click", function() {
  var dates = [];
  for (let o of document.querySelectorAll("#dates option"))
  {
    dates.push(o.value);
  }
});

<div>
  <p>Select dates</p>
  <input type="date" id="date" />

  <button>Add Date</button>
</div>

<div style="padding-top:20px;">
  <select name="dates" id="dates" size="5">
  </select>
</div>

<button id="finish">Finish</button>

我已包含有关如何从选择列表选项中获取项目的代码，但您必须从那里以您喜欢的任何方式处理数据。

【讨论】：

【解决方案2】：

目前尚不完全清楚您所描述或引用的数据类型“比开始和结束日期更具体”。

如果您只是希望能够提交一定数量的特定日期/日期，那么您可以使用数组。

Date 1. <input type="date" name="data[]"><br>
Date 2. <input type="date" name="data[]"><br>
Date 3. <input type="date" name="data[]"><br>
Date 4. <input type="date" name="data[]"><br>

或者如果你想要多个日期范围，

Dates 1. <input type="date" name="data_range_from[]"> to <input type="date" name="data_range_to[]"><br>
Dates 2. <input type="date" name="data_range_from[]"> to <input type="date" name="data_range_to[]"><br>
Dates 3. <input type="date" name="data_range_from[]"> to <input type="date" name="data_range_to[]"><br>

在任何一种情况下，服务器都会收到一个字符串条目数组，而不是单个字符串。

请注意，您的 id="data" 在所有示例中都已删除，因为它不再是唯一的。你会想改用一个类。

【讨论】：