需要在下拉菜单中动态列出接下来的几天/日期

Question

作为我工作的一部分，我负责在我的组织网站上工作（使用 Squarespace 构建）。

我现在要做的是简化预约表格，以便客户只能在本周选择一天，并且他们可以在任何时间出现，只要是他们当天的预约。已经选择了。

显然，如果您知道 Squarespace，它的日程安排选项不允许我删除选择约会时间（按持续时间以分钟计），所以我决定从头开始创建一个新的申请表。

所以我会让用户从这里的下拉菜单中选择约会日期。

<select id="day" name="name">
  <option>Monday</option>
  <option>Tuesday</option>
  <option>Wednesday</option>
  <option>...</option>
</select>

但是我的老板希望菜单显示这些天以及相应的日期（即星期一 24 日、星期二 25 日等）

我知道 JavaScript 是我可以正确编写这样一个菜单的唯一方法，所以这就是我想要的。

• 显示未来 7 天左右（包括今天）的下拉菜单
• 每个选项都必须显示星期几以及相应的日期和月份（即 1 月 17 日星期一）
• 它只能显示工作日和星期六。不得显示星期日。

任何帮助将不胜感激。谢谢。

Answer 1

这是另一个提供 6 个日期选项的 sn-p，从今天开始：

const td=new Date();               // set Date object td to today
const opts=[...Array(7)].map(_=>{  // generate an Array of 7 (empty) elements
 let r=td.toLocaleString("en-us",{weekday:"long",month:"short",day:"numeric"}); // format date td
 td.setDate(td.getDate()+1);       // increment td by one calendar day
 return r                          // return date string to opts array 
}).filter(d=>!d.match(/^Sun/))     // remove the Sunday from the array

document.querySelector("select").innerHTML=opts.map(o=>`<option>${o}</option>`).join("") // make options

<select></select>

Answer 2

这里有一些代码，循环通过接下来的 7 天并消除星期日，希望对您有所帮助！

let today = new Date(); // get Today date
let dropDownMenu = document.getElementById('day');

for(let i = 0; i < 7; i++){ // Looping through 7 next days
    let newDate = new Date()
    newDate.setDate(today.getDate() + i); 
    if(newDate.getDay() === 0){ 
        continue; // Eliminating the Sunday
    }
    else{ 
      let dayText = document.createTextNode(Intl.DateTimeFormat('en-US', {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'}).format(newDate)); // Formating the date the way you want before appending into option Element
      let dayOption = document.createElement('option')
      dayOption.append(dayText);
      dropDownMenu.append(dayOption);
    }
}

<select id="day" name="name">
  
</select>