根据当前日期的时间隐藏元素答案

【问题标题】：Hide an element depending on the time of the CURRENT DAY根据当前日期的时间隐藏元素
【发布时间】：2020-05-16 16:04:19
【问题描述】：

我正在使用 jquery 中的 ui-datepicker 日历，并且我试图仅在当天上午 10 点之前隐藏以下选项的元素 option:nth-child(2)：

<select name="delivery_time_frame" id="delivery_time_frame" class="select " data-allow_clear="true" data-placeholder="Choose a time of delivery ">                          
  <option value="">Choose a time of delivery </option>
  <option value="time_frame:0">12:00 – 14:00</option>
  <option value="time_frame:1">14:00 – 16:00</option>
  <option value="time_frame:2">16:00 – 18:00</option>
  <option value="time_frame:3">18:00 – 20:00</option>                       
</select>

通过使用查询选择器：

document.querySelector("#delivery_time_frame > option:nth-child(2)")

例如，如果时间仅在当天上午 10:00 之前，我想隐藏第一个选项。如果有人在日历中选择了超出当前日期的日期，我不想隐藏。例如，如果在 datepicker 日历中选择了任何第二天，我不会隐藏该元素；我希望它可见以供选择。

如果有人选择在日历中交付的同一天，我想要除第一个之外的所有选项（从 14:00 到 20:00）。如果选择任何其他日期交付，我希望所有选项都可用。

感谢您的帮助！

【问题讨论】：

选择的日期选择必须是逻辑的一部分，那在哪里？

标签： javascript date datetime datetimepicker jquery-ui-datepicker

【解决方案1】：

我不太清楚你的问题的确切情况。根据提供的信息，您似乎希望根据某些条件显示 DDL 的不同选项。解决此类问题的方法可能很少：

根据业务逻辑使用动态准备选项一些循环（例如：for循环）。然后将其分配给 Select(DDL/Drop Down 列表控件）。
使用静态选项显示 DDL 并添加/删除类以显示/隐藏 options 使用函数来控制选项的显示。
使用静态选项准备多个 DDL，并将合适的 DDL 显示为必需的。这不是推荐的方法，只是一种解决方法。

如果我误解了您的问题，请提供描述事件顺序和预期结果的屏幕截图。

【讨论】：

【解决方案2】：

您应该将一个最小的示例发布为代码，以便其他人可以尽可能轻松地重现您的问题。我已经模拟了一些支持的东西，可能不是你所拥有的，但作为一个例子就足够了。

我会禁用该选项而不是隐藏它，以便用户知道该选项在那里，只是在他们选择的日期不可用（这样的消息可能也有帮助）。

必须有一个关联的日期选择才能知道用户选择了哪个日期才能启用或禁用该选项。该元素需要一个监听器来修改时间选择中的选项，例如

// Helpers
function formatDate(date) {
  let z = n=>(n<10?'0':'')+n;
  return `${date.getFullYear()}-${z(date.getMonth()+1)}-${z(date.getDate())}`;
}
function parseISOLocal(s) {
  let [y,m,d] = s.split('-');
  return new Date(y, --m, d);
}

// Hide option if before 10 am today
function checkSelected() {
  // Get today's date
  let today = new Date();
  // Get date formatted for comparision with value in select
  let todayStamp = formatDate(today);
  // Get selected date
  let selectedDate = this.value; //document.getElementById('delivery_date').value
  // Get target option
  let opt = document.querySelector('#delivery_time_frame > option:nth-child(2)');
  // If it's today and before 10, hide option
  if (selectedDate == todayStamp && today.getHours() < 10) {
    console.log('disable ' + opt.value);
    opt.disabled = true;
    // Deselect in case it's been selected
    opt.selected = false;
  } else {
    opt.disabled = false;
    console.log('enable ' + opt.value);
  }
}

window.onload = function(){
  // Insert some dates in delivery_date
  let now = new Date();
  let select = document.getElementById('delivery_date');
  for (let i=0; i<3; i++) {
    let d = formatDate(now);
    select.appendChild(new Option(d, d));
    now.setDate(now.getDate() + 1);
  }
  // Attach listener on select
  let sel = document.querySelector('#delivery_date');
  if (sel) {
    sel.addEventListener('change', checkSelected, false);
  }
};

<select name="delivery_date" id="delivery_date">
  <option selected>Select a delivery date
</select>
<select name="delivery_time_frame" id="delivery_time_frame" class="select " data-allow_clear="true" data-placeholder="Choose a time of delivery ">                          
  <option value="" selected>Choose a time of delivery </option>
  <option value="time_frame:0">12:00 – 14:00</option>
  <option value="time_frame:1">14:00 – 16:00</option>
  <option value="time_frame:2">16:00 – 18:00</option>
  <option value="time_frame:3">18:00 – 20:00</option>                   
</select>

它还需要处理用户是否已经选择了时间（上面没有尝试，因为我不知道你需要实现什么其他逻辑）。

您也可以在用户选择日期之前禁用时间选择。

【讨论】：