时间戳

首页 > 解决方案 > 如何将期权日期设置为昨天今天和明天？

javascript - 如何将期权日期设置为昨天今天和明天？

问题描述

我正在尝试将选项设置为昨天、今天、明天的日期，我正在尝试在下面的代码中实现它的工作但它没有显示昨天的日期，我希望选择今天的日期以及它应该显示昨天的日期和明天的日期..如何实施？任何帮助，将不胜感激。提前致谢..

<select id= "date-range" class="form-control" name="date">
   <option value="yesterday">15th June 2019 (Yesterday) </option>
   <option selected value="today">16th June 2019 (Today) </option>
   <option value="tomorrow">17th June 2019 (Tomorrow) </option>
 </select>

jQuery

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var dateRange = document.getElementById('date-range'),
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", 
"Sep", "Oct", "Nov", "Dec"];

for(var day = 0; day < 3; day++) {
  var date = new Date();
  date.setDate(date.getDate() + day);
  dateRange.options[dateRange.options.length] = new 
Option([date.getDate(), monthNames[date.getMonth()], 
date.getFullYear()].join(' '), date.toISOString());
}
});
</script>

标签： javascriptphpjquerydate

解决方案

您在 for 循环中使用day变量将其添加到今天的日期。由于它从0开始，它永远不会得到昨天的日期。改为从-1开始。

要自动选择一个选项，您可以使用 HTMLOptionElement 的defaultSelected和selected参数并将它们设置为 true。

最后，要找出用户选择的内容，您需要将更改事件侦听器附加到选择元素。

var dateRange = document.getElementById('date-range'),
  monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
    "Sep", "Oct", "Nov", "Dec"
  ];
var days = ["yesterday", "today", "tomorrow"];
for (var day = -1; day < 2; day++) {
  var date = new Date();
  date.setDate(date.getDate() + day);
    var dateAsString = [date.getDate(), monthNames[date.getMonth()],
    date.getFullYear()
  ].join(' ');
  if (day == 0) {
    dateRange.options[dateRange.options.length] = new
    Option(dateAsString, dateAsString + " (" + days[day + 1] + ")", true, true);
  } else {
    dateRange.options[dateRange.options.length] = new
    Option(dateAsString, dateAsString + " (" + days[day + 1] + ")");
  }
}

function handleSelected(e) {
  console.log(e.target[e.target.selectedIndex].value + " selected");
}

dateRange.addEventListener("change", handleSelected);
<select id="date-range" class="form-control" name="date">

</select>

推荐阅读