Date Picker Configuration System

Build a date picker initialization module that sets up consistent default behavior across multiple date picker instances in a web application.

Requirements

Your task is to create a date picker configuration system that:

1. Sets global defaults that apply to all date picker instances
2. Creates multiple date picker instances with these shared defaults
3. Allows individual instances to override specific defaults when needed

Functionality

Global Configuration

The system should set the following global defaults:

• Date format: "Y-m-d" (YYYY-MM-DD format)
• Enable time selection
• Use 24-hour time format
• Set the first day of the week to Monday
• Enable the "close on select" behavior for single date selection

Date Picker Instances

Create three date picker instances:

1. Start Date Picker - attached to an input with id "start-date"

   • Uses all global defaults

2. End Date Picker - attached to an input with id "end-date"

   • Uses all global defaults

3. Appointment Date Picker - attached to an input with id "appointment-date"

   • Overrides the date format to "F j, Y" (e.g., "January 15, 2024")
   • Disables time selection (shows only the date picker)

Test Cases

• The start date picker displays dates in "Y-m-d" format with time enabled @test
• The end date picker uses the same format and configuration @test
• The appointment date picker displays dates in "F j, Y" format without time selection @test
• All date pickers start the week on Monday @test

Implementation

@generates

API

/**
 * Configures global defaults and initializes date picker instances
 * Creates three date pickers with shared defaults and specific overrides
 */
export function initializeDatePickers(): void;

Dependencies { .dependencies }

flatpickr { .dependency }

Provides lightweight JavaScript datetime picker functionality.