Pikaday日期选择限制问题求助：JQuery新手遇栈溢出错误

Hey there! Let's work through this issue you're having—stack overflow errors with Pikaday almost always come down to unintended loops or recursive event triggers, so let's break this down simply for a jQuery beginner.

First, Why the Stack Overflow? #

Chances are, your current code is either:

• Reinitializing Pikaday every time the dropdown changes (binding duplicate events that trigger each other)
• Or your disableDayFn logic is accidentally triggering a date change/refresh that calls itself over and over, creating an infinite loop.

Here's a Clean, Working Solution #

Let's structure this step by step, with code you can drop in and tweak:

1. Your HTML (keep it simple)

<select id="stay-duration">
  <option value="3">3天</option>
  <option value="4">4天</option>
  <option value="7">7天</option>
</select>
<input type="text" id="start-date" placeholder="选择入住日期">

2. jQuery + Pikaday Code

// Initialize Pikaday ONCE and store it in a variable (key to avoiding loops!)
const datePicker = new Pikaday({
  field: document.getElementById('start-date'),
  // Default: allow all dates until we set restrictions
  disableDayFn: () => false
});

// Listen for changes to the stay duration dropdown
$('#stay-duration').on('change', function() {
  const selectedDuration = $(this).val();
  let allowedWeekdays = [];

  // Map duration to allowed weekdays (note: Pikaday uses getDay(): 0=Sun, 1=Mon, ..., 6=Sat)
  switch(selectedDuration) {
    case '3':
      allowedWeekdays = [5]; // Friday is day 5
      break;
    case '4':
      allowedWeekdays = [1]; // Monday is day 1
      break;
    case '7':
      allowedWeekdays = [6]; // Saturday is day 6
      break;
    default:
      allowedWeekdays = []; // No restrictions if nothing matches
  }

  // Update Pikaday's date restriction logic (no loops here!)
  datePicker.set('disableDayFn', function(date) {
    // Disable dates that aren't in our allowed weekdays list
    return !allowedWeekdays.includes(date.getDay());
  });

  // Refresh the picker to show the new restrictions immediately
  datePicker.draw();
});

Key Tips to Avoid Stack Overflow #

• Only initialize Pikaday once: Re-creating the picker on every dropdown change binds duplicate event listeners that trigger each other endlessly. Storing the picker in a variable lets us update its config directly.
• Keep disableDayFn pure: This function should only return true (disable date) or false (allow date)—no modifying the picker, triggering events, or calling other functions that might re-run this logic.
• Use draw() to refresh: Calling datePicker.draw() updates the picker's UI without triggering extra events that could cause loops.

Testing It Out #

When you select "3天" in the dropdown, only Fridays will be clickable. Select "4天" and only Mondays work, "7天" limits you to Saturdays. No more stack overflow crashes!

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