技术求助：基于JavaScript在Squarespace网站实现符合规则的动态预约日期下拉菜单

I’ve got you covered with a JavaScript solution that generates exactly the dropdown you need—showing the next 7 days (including today), formatted with weekday, ordinal date, and month, while excluding Sundays. Here’s how to implement it:

Step 1: Add the HTML Select Element #

First, place this dropdown structure in your Squarespace form area (use a "Code Block" widget for this):

<select id="appointment-day" name="appointment-day">
  <!-- Options will be populated by JavaScript -->
</select>

Step 2: The JavaScript Code #

Add this script to your page (you can inject it via Settings > Advanced > Code Injection > Footer, or place it in the same Code Block as the HTML, wrapped in <script> tags):

// Function to get ordinal suffix (1st, 2nd, 3rd, etc.)
function getOrdinalSuffix(day) {
  if (day > 3 && day < 21) return 'th'; // Covers 4th-20th
  switch (day % 10) {
    case 1: return 'st';
    case 2: return 'nd';
    case 3: return 'rd';
    default: return 'th';
  }
}

// Function to generate the date options
function populateDateDropdown() {
  const select = document.getElementById('appointment-day');
  if (!select) return; // Exit if the dropdown isn't found

  const today = new Date();
  
  // Loop through the next 7 days (including today)
  for (let i = 0; i < 7; i++) {
    const currentDate = new Date(today);
    currentDate.setDate(today.getDate() + i);
    
    // Skip Sundays (getDay() returns 0 for Sunday)
    if (currentDate.getDay() === 0) continue;

    // Format the date components
    const weekday = currentDate.toLocaleDateString('en-US', { weekday: 'long' });
    const day = currentDate.getDate();
    const ordinal = getOrdinalSuffix(day);
    const month = currentDate.toLocaleDateString('en-US', { month: 'long' });
    
    // Create and add the option element
    const option = document.createElement('option');
    option.textContent = `${weekday} ${day}${ordinal} ${month}`;
    option.value = currentDate.toISOString().split('T')[0]; // Store YYYY-MM-DD as value for form submission
    select.appendChild(option);
  }
}

// Run the function when the page loads
document.addEventListener('DOMContentLoaded', populateDateDropdown);

Key Features Explained #

• Ordinal Suffix Handling: The getOrdinalSuffix function ensures dates like 1st, 2nd, 3rd are formatted correctly instead of plain numbers.
• Sunday Exclusion: We check currentDate.getDay() === 0 (JavaScript's getDay() returns 0 for Sunday) and skip those dates entirely.
• User-Friendly Formatting: Uses toLocaleDateString to pull full weekday and month names, making the options easy for customers to read.
• Form-Ready Values: Each option stores dates in YYYY-MM-DD format—this is a standard, easy-to-process format for handling form submissions later.

How to Add This to Squarespace #

1. Add the HTML: Insert a Code Block in your form section, paste the <select> code, and set the block's display mode to "HTML".
2. Add the JavaScript: Go to Settings > Advanced > Code Injection, paste the script into the Footer field, and save. Alternatively, wrap the script in <script> tags and add it directly below the <select> in the same Code Block.

That’s it! Your dropdown will dynamically populate with valid dates every time the page loads, exactly matching your team’s requirements.

内容的提问来源于stack exchange，提问作者mereMolf