javascript - 在 Jquery 中向日期值添加天数

Question

我有一个简单的下拉菜单，显示日期。有没有办法使用 jQuery 在下拉列表中显示日期，例如 2020 年 2 月 2 日星期日，而不仅仅是日期？

var options = document.getElementsByTagName('.date option');
for (i = 0; i < options.length; ++i) {
  options[i].innerHTML = options[i].getDay()
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="date">
  <select name="tour-date">
    <option value="2020-02-02" selected="">February 2, 2020</option>
    <option value="2020-02-09">February 9, 2020</option>
    <option value="2020-02-16">February 16, 2020</option>
    <option value="2020-02-23">February 23, 2020</option>
    <option value="2020-03-01">March 1, 2020</option>
    <option value="2020-03-08">March 8, 2020</option>
    <option value="2020-03-15">March 15, 2020</option>
    <option value="2020-03-22">March 22, 2020</option>
    <option value="2020-03-29">March 29, 2020</option>
    <option value="2020-04-05">April 5, 2020</option>
    <option value="2020-04-12">April 12, 2020</option>
    <option value="2020-04-19">April 19, 2020</option>
    <option value="2020-04-26">April 26, 2020</option>
    <option value="2020-05-03">May 3, 2020</option>
    <option value="2020-05-10">May 10, 2020</option>
    <option value="2020-05-17">May 17, 2020</option>
    <option value="2020-05-24">May 24, 2020</option>
    <option value="2020-05-31">May 31, 2020</option>
    <option value="2020-06-07">June 7, 2020</option>
    <option value="2020-06-14">June 14, 2020</option>
    <option value="2020-06-21">June 21, 2020</option>
    <option value="2020-06-28">June 28, 2020</option>
    <option value="2020-07-05">July 5, 2020</option>
    <option value="2020-07-12">July 12, 2020</option>

  </select>


</div>

Answer 1

要实现此目的，您可以使用 Date 对象的 getDay() 和 getMonth() 函数来获取可转换为的日期索引他们的文本值。然后，您可以向 text() 提供一个函数，该函数计算出给定 option 元素的完整日期并返回新值。试试这个:

var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

$('.date option').text(function() {
  var d = new Date($(this).val());
  return `${days[d.getDay()]} ${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="date">
  <select name="tour-date">
    <option value="2020-02-02" selected="">February 2, 2020</option>
    <option value="2020-02-09">February 9, 2020</option>
    <option value="2020-02-16">February 16, 2020</option>
    <option value="2020-02-23">February 23, 2020</option>
    <option value="2020-03-01">March 1, 2020</option>
    <option value="2020-03-08">March 8, 2020</option>
    <option value="2020-03-15">March 15, 2020</option>
    <option value="2020-03-22">March 22, 2020</option>
    <option value="2020-03-29">March 29, 2020</option>
    <option value="2020-04-05">April 5, 2020</option>
    <option value="2020-04-12">April 12, 2020</option>
    <option value="2020-04-19">April 19, 2020</option>
    <option value="2020-04-26">April 26, 2020</option>
    <option value="2020-05-03">May 3, 2020</option>
    <option value="2020-05-10">May 10, 2020</option>
    <option value="2020-05-17">May 17, 2020</option>
    <option value="2020-05-24">May 24, 2020</option>
    <option value="2020-05-31">May 31, 2020</option>
    <option value="2020-06-07">June 7, 2020</option>
    <option value="2020-06-14">June 14, 2020</option>
    <option value="2020-06-21">June 21, 2020</option>
    <option value="2020-06-28">June 28, 2020</option>
    <option value="2020-07-05">July 5, 2020</option>
    <option value="2020-07-12">July 12, 2020</option>
  </select>
</div>

请注意，上面计算并格式化了完整日期。如果愿意，您可以简化为仅附加日期名称:

var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

$('.date option').text(function(i, t) {
  return `${days[new Date($(this).val()).getDay()]} ${t}`;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="date">
  <select name="tour-date">
    <option value="2020-02-02" selected="">February 2, 2020</option>
    <option value="2020-02-09">February 9, 2020</option>
    <option value="2020-02-16">February 16, 2020</option>
    <option value="2020-02-23">February 23, 2020</option>
    <option value="2020-03-01">March 1, 2020</option>
    <option value="2020-03-08">March 8, 2020</option>
    <option value="2020-03-15">March 15, 2020</option>
    <option value="2020-03-22">March 22, 2020</option>
    <option value="2020-03-29">March 29, 2020</option>
    <option value="2020-04-05">April 5, 2020</option>
    <option value="2020-04-12">April 12, 2020</option>
    <option value="2020-04-19">April 19, 2020</option>
    <option value="2020-04-26">April 26, 2020</option>
    <option value="2020-05-03">May 3, 2020</option>
    <option value="2020-05-10">May 10, 2020</option>
    <option value="2020-05-17">May 17, 2020</option>
    <option value="2020-05-24">May 24, 2020</option>
    <option value="2020-05-31">May 31, 2020</option>
    <option value="2020-06-07">June 7, 2020</option>
    <option value="2020-06-14">June 14, 2020</option>
    <option value="2020-06-21">June 21, 2020</option>
    <option value="2020-06-28">June 28, 2020</option>
    <option value="2020-07-05">July 5, 2020</option>
    <option value="2020-07-12">July 12, 2020</option>
  </select>
</div>