Question

如何将JS select box的值设置为当前日期和过去的选定期间，例如，今天的日期2018-01-09和30天前的所选日期{{1}选项值应为2017-12-10。同样必须适用于每个7天，14天，30天，90天和365天。到目前为止，我已经尝试过这个......

2018-01-03,2018-01-09

然而，我找不到在setTimeout(function () { var today = new Date() var last7 = new Date().setDate(today.getDate()-7) var last14 = new Date().setDate(today.getDate()-14) var last30 = new Date().setDate(today.getDate()-30) var last90 = new Date().setDate(today.getDate()-90) var last365 = new Date().setDate(today.getDate()-365) $('#DateSelector').val('30').trigger("change"); }, 1000);值中使用这些变量的方法。

option

Answer 1

我不知道您为什么要使用 setTimeout ，只需在元素位于页面中时调用该函数。我已经使用了窗口的加载事件，但还有其他方法。

setDate 返回一个时间值，您需要一个格式化的日期字符串，因此您需要修改代码的这一部分。然后，您需要将新值分配给选项元素，所以：

＆＃13;

// Set select values
function setSelectValues(id) {
  var sel = document.getElementById(id);
  if (!sel) return;
  // Array of intervals to set
  Array.from(sel.options).forEach(function(opt) {
    var d = new Date();
    d.setDate(d.getDate() - opt.value);
    opt.value = formatYMD(d);
  });
}

// Helper to format the date
function formatYMD(date) {
  return date.getFullYear() + '-' + 
    ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
    ('0' + date.getDate()).slice(-2);
}

// Run updater
window.onload = function(){setSelectValues('DateSelector')};

＆＃13;

<select name="DateSelector" id="DateSelector" onchange="console.log(this.value)">
   <option value="7" selected>Last 7 Days</option>
   <option value="14">Last 14 Days</option>
   <option value="30">Last 30 Days</option>
   <option value="90">Last 90 Days</option>
   <option value="365">Last 365 Days</option>
</select>

＆＃13;

您还应将其中一个选项设置为选中（通常是第一个）。

Answer 2

添加要选择的值并从函数中获取该值，然后将其减去。

＆＃13;

function overviewDates(e) {
 var s = e.target,
     selected = s.options[s.selectedIndex].value,
     d = new Date(),
     cur = d.setDate(d.getDate() - selected);
     
     t.innerHTML = `${selected} days ago was: ${d.toLocaleString()}`
 }
 
 var s = document.getElementById("DateSelector").addEventListener("click", overviewDates);

＆＃13;

<select name="DateSelector" id="DateSelector"
   <option value="7">Last 7 Days</option>
   <option value="14">Last 14 Days</option>
   <option value="30">Last 30 Days</option>
   <option value="90">Last 90 Days</option>
   <option value="365">Last 365 Days</option>
</select>

<h1 id="t"></h1>

＆＃13;

选择框的值作为动态日期

2 个答案: