Como parte de mi trabajo, estoy a cargo de trabajar en el sitio web de mi organización (creado con Squarespace).
Lo que tengo que hacer, ahora mismo, es simplificar un formulario de cita para que los clientes solo puedan elegir un día de la semana actual, con la idea de que puedan acudir a la cita en cualquier momento, siempre que sea el día que han elegido.
Obviamente, si conoce Squarespace, sus opciones de programación no me permiten eliminar la elección de los horarios de las citas (por duración en minutos), así que decidí crear un nuevo formulario de solicitud desde cero.
Así que haría que el usuario eligiera el día de la cita en un menú desplegable aquí.
<select id="day" name="name"> <option>Monday</option> <option>Tuesday</option> <option>Wednesday</option> <option>...</option> </select>Pero mi jefe quiere que el menú se muestre estos días junto con sus fechas correspondientes (es decir, lunes 24, martes 25, etc.)
Sé que JavaScript es la única forma en que puedo programar correctamente un menú como este, así que esto es lo que quiero.
Cualquier ayuda sería muy apreciada. Gracias.
Aquí hay otro fragmento que ofrece 6 opciones de fecha, comenzando con hoy:
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>Aquí algunos códigos, que recorren los próximos 7 días y eliminan los domingos, ¡espero que ayude!
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>