在 Jquery 中将天数添加到日期值答案

【问题标题】：Adding Days to a Date value in Jquery在 Jquery 中将天数添加到日期值
【发布时间】：2020-01-09 08:38:10
【问题描述】：

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

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>

【问题讨论】：

是的，use this。如果您有需要帮助调试的特定问题，请将您的 JS 添加到问题中。
在问题中添加了代码 sn-p，但似乎无法正常工作

标签： javascript jquery

【解决方案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>

【讨论】：

没问题，很高兴为您提供帮助。请注意，我添加了另一个示例，该示例仅附加日期名称，而不是计算和格式化完整日期。

【解决方案2】：

您可以尝试： new Date('2020-02-02').getDay()

getDay 将返回一个介于 0-6 之间的数字，而零将是根据当地时间一周的第一天

我在new Date() 中使用的2020-02-02 假定在您在值中设置时可用。然后，您可以在数字和要显示的日期字符串之间建立映射

【讨论】：

在问题中添加了代码 sn-p，但似乎无法正常工作

【解决方案3】：

我想你正在寻找toDateString()函数example

var d = new Date();
var n = d.toDateString();
console.log(n)

输出

Thu Jan 09 2020

【讨论】：

您将如何添加它以便下拉菜单也显示日期值？

【解决方案4】：

您可以简单地将日期字符串转换为日期对象，如下所示：

var dateForSelectValue = new Date('2020-01-07');

或者如果你已经有一个日期对象，你可以像下面这样附加它

returnDayString(dateForSelectValue.getDay()) + '' + dateForSelectValue.getDate() + ',' + dateForSelectValue.getFullYear();

上面的方法dateForSelectValue.getDay()返回一个从0到6的整数，其中1是星期一，以此类推。因此，您可以简单地编写一个 JavaScript 函数 returnDayString 其中 return Day 名称来自 Day Integer。

希望有帮助

【讨论】：

【解决方案5】：

纯js版本-您可以遍历所有选项并从选项值中获取短日期

var dateValueFromOption = new Date(optionValue);
var stringDateFromOption = dateValueFromOption.toDateString();

然后将选项文本更改为新的日期格式stringDateFromOption

var dropDownElement = document.getElementById("tour-date")
const dropDownOptions = dropDownElement.options;

for (i = 0; i < dropDownOptions.length; i++) {

  //optional, maybe you will need the ids at something else
  let dropDownOptionId = dropDownElement.options[i].id;
  dropDownOptionId = "option_" + i;

  const optionValue = dropDownOptions[i].value;

  var dateValueFromOption = new Date(optionValue);
  var stringDateFromOption = dateValueFromOption.toDateString();

  dropDownOptions[i].text = stringDateFromOption
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="tour-date" name="tour-date">
  <option value="2020-02-02" selected=""></option>
  <option value="2020-02-09"></option>
  <option value="2020-02-16"></option>
  <option value="2020-02-23"></option>
  <option value="2020-03-01"></option>
</select>

【讨论】：

【解决方案6】：

您可以使用toLocaleDateString并提供格式和地区

var format = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var options = document.getElementsByTagName('option');

for (i = 0; i < options.length; ++i)
 options[i].innerHTML = new Date(options[i].value).toLocaleDateString("en-US", format);

<select name="tour-date">
  <option value="2020-02-02" selected=""></option>
  <option value="2020-02-09"></option>
  <option value="2020-02-16"></option>
  <option value="2020-02-23"></option>
  <option value="2020-03-01"></option>
</select>

【讨论】：

如果不使用moment.js，这可能吗？
@user38208 找到了一种使用 vanilla js 的方法