Date Selection Event Logger

Build a date selection form that logs user date selection activity with timestamps and selected date information.

Requirements

Create a web form with a date input field that tracks and displays user interaction history. When users select dates, the application should capture this event and log details about the selection.

Functional Requirements

1. Date Input Field: Provide a single date input field for users to select dates
2. Selection Logging: When a date is selected, record:
   • The timestamp of when the selection was made
   • The selected date in ISO format (YYYY-MM-DD)
   • Store this information in a log display area
3. Log Display: Show all logged selections in a list format below the date picker, with most recent selections at the top
4. Clear Functionality: Provide a button to clear the date selection, which should also log the clearing action

Technical Requirements

• Use vanilla JavaScript (no frameworks required)
• The date picker should be user-friendly and functional
• The log should update immediately when dates are selected or cleared
• Format timestamps as: HH:MM:SS
• Format dates as: YYYY-MM-DD

Example Behavior

When a user interacts with the date picker:

• Selects February 14, 2024 at 10:30:45 → Log shows: 10:30:45 - Selected: 2024-02-14
• Clears the selection at 10:31:02 → Log shows: 10:31:02 - Cleared selection
• Selects March 1, 2024 at 10:31:15 → Log shows: 10:31:15 - Selected: 2024-03-01

Implementation

@generates

API

/**
 * Initializes the date selection logger
 * @param {string} inputSelector - CSS selector for the date input element
 * @param {string} logSelector - CSS selector for the log display element
 * @param {string} clearButtonSelector - CSS selector for the clear button element
 */
function initDateLogger(inputSelector, logSelector, clearButtonSelector);

/**
 * Logs a date selection event
 * @param {Date[]} selectedDates - Array of selected Date objects
 * @param {string} dateStr - String representation of the date
 */
function logSelection(selectedDates, dateStr);

/**
 * Clears the current selection and logs the clear action
 */
function clearSelection();

Test Cases

• When a date is selected, a log entry is added with the current time and selected date @test
• When the clear button is clicked, the date selection is cleared and a "Cleared selection" entry is logged @test
• When multiple dates are selected in sequence, each selection is logged separately in chronological order @test
• The log displays entries with timestamps formatted as HH:MM:SS and dates formatted as YYYY-MM-DD @test

Dependencies { .dependencies }

flatpickr { .dependency }

Provides date picker functionality with event hooks for tracking user selections.

@satisfied-by