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.
Any help would be much appreciated. Thank you.
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>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>