Need to dynamically list the next coming days/dates in a dropdown menu-CodePudding

As part of my job, I'm in charge of working on my organizations website (built using Squarespace).

What I gotta do, right now, is simplify an appointment form so that customers can only pick a day in the current week, with the idea they can turn up for the appointment any time as long as its on the day they've chosen.

Obviously, if you know Squarespace, its scheduling options doesn't allow me to remove choosing appointment times (by duration in minutes) so I decided to create a new application form from scratch.

So I'd have the user choose the appointment day from a dropdown menu here.

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

But my boss wants the menu to display these days along with their corresponding dates (i.e. Monday 24th, Tuesday 25th, etc.)

I know JavaScript is the only way I can properly program a menu like this so here is what I want.

A dropdown menu that displays the next 7 or so days, including today
Each option must display the day of the week along with the corresponding day and month (i.e. Monday 17th January)
It must only display Weekdays and Saturdays. Sundays must NOT be displayed.

Any help would be much appreciated. Thank you.

CodePudding user response：

Here is another snippet delivering 6 date options, starting with today:

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>

CodePudding user response：

Here some codes, that loops through next 7 days and eliminates the Sundays, hope it helps !

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>