Multi-Date Event Scheduler

Build a date selection interface that allows users to select multiple dates for a recurring event and displays them in a user-friendly format.

Requirements

Create a date picker that:

1. Allows selection of multiple separate dates (not a date range)
2. Displays the selected dates in the input field with " and " as the separator between dates
3. Allows users to deselect dates by clicking them again
4. Formats the displayed dates in a readable format (e.g., "January 15, 2025")
5. Provides programmatic access to the selected dates as an array

Implementation

Implement the date picker functionality in a file that exports:

• An initialization function that sets up the date picker on a given input element
• Proper configuration to enable multiple date selection
• Custom conjunction string for joining selected dates

@generates

API

/**
 * Initializes a multi-date picker on the specified input element
 *
 * @param {HTMLElement} inputElement - The input element to attach the picker to
 * @returns {Object} The date picker instance
 */
function initMultiDatePicker(inputElement) {
  // Returns a configured date picker instance
}

module.exports = { initMultiDatePicker };

Test Cases

• Given an input element, when the picker is initialized, it allows multiple dates to be selected @test
• When multiple dates are selected (e.g., Jan 15, 2025 and Feb 20, 2025), they are displayed with " and " between them @test
• When a selected date is clicked again, it is deselected and removed from the display @test
• The date picker maintains selected dates in chronological order @test

Dependencies { .dependencies }

flatpickr { .dependency }

Provides the datetime picker functionality with multiple date selection support.

@satisfied-by