时间戳

首页 > 解决方案 > 根据当前日期的时间隐藏元素

javascript - 根据当前日期的时间隐藏元素

问题描述

我正在使用 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）。如果选择任何其他日期交付，我希望所有选项都可用。

谢谢你的帮助！

标签： javascriptdatedatetimedatetimepickerjquery-ui-datepicker

解决方案

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

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

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

// 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>

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

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

推荐阅读