如何在同一输入中 select 多个日期？

Question

我需要管理 'courses' 可用的日期。我有一个简单的输入数据如下：

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

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

我可以指定开始日期和结束日期，但我想要更具体的信息。提前致谢。

Answer 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>

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

Answer 2

不完全清楚您使用 'more specificity than with a start and end date' 描述或引用的数据类型。

如果您只是想提交一定数量的特定 days/dates，那么您可以使用数组。

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" 在所有示例中都已删除，因为它不再是唯一的。你会想使用 class 来代替。

如何在同一输入中 select 多个日期？

How can I select multiple dates in the same input?

html

javascript

css

date

input