multiple_dates

The Multiple Dates module provides a high-performance, vanilla JavaScript-based field type for selecting and storing multiple dates within a single field. Designed specifically for Drupal 10/11, it eliminates heavy dependencies like jQuery UI while offering an accessible, highly configurable calendar interface that blends seamlessly into the Drupal admin UI.

Key Features

• Vanilla JS Picker: Zero external dependencies; no jQuery UI or third-party plugins required, ensuring a lightweight footprint.
• Efficient Storage: Stores hundreds of dates as a comma-separated ISO 8601 string in a single TEXT column to optimize database performance.
• Flexible Selection Logic: Supports "Free" picking, "Maximum picks" capping, and "Days range" auto-selection for complex scheduling needs.
• Bulk Management Tools: Includes "Select/Clear visible months" actions and a raw textarea for instant pasting of large date lists.
• High Accessibility: Built with full keyboard navigation support, ARIA roles, and native dark-mode compatibility via CSS variables.

Installation

Install the module via Composer to automatically manage all Drupal 10/11 requirements:

composer require drupal/multiple_dates

Enable the module using Drush:

drush en multiple_dates -y

Configuration

Setting up the Multiple Dates field involves three primary steps within the Drupal UI:

1. Field Creation: Add a new field of type Multiple Dates to any entity (Node, User, Block, etc.).
2. Widget Settings: Navigate to Manage Form Display to configure the Number of months (e.g., 2,3 for a 6-month grid), Min/Max Date offsets, and Disable days to block specific weekdays.
3. Formatter Settings: Navigate to Manage Display to choose between List view, Comma separated, or a read-only Calendar view grid.

Architecture & Logic

The module prioritizes front-end performance and independence from the Drupal AJAX system for a smoother user experience:

• FieldItem API: Extends FieldItemBase with custom methods like getDates() and getDateCount() for easy developer access in templates or hooks.
• Modern Frontend: Utilizes a custom Vanilla JS library defined in multiple_dates.libraries.yml for instant interactions.
• Server-Side Validation: All constraints, such as maximum picks and excluded dates, are strictly validated in the PHP elementValidate callback.

Security & Performance

• Reduced Payload: By removing legacy jQuery UI dependencies, the front-end payload is significantly reduced, helping improve site Core Web Vitals.
• Sanitized Storage: Data is strictly validated against the YYYY-MM-DD format before being committed to the database.
• CSS Isolation: Styling is encapsulated within the .mdp-wrapper namespace to prevent theme collisions and ensure UI consistency.

Similar Projects

• Multi Dates Picker (MDP): A predecessor that uses jQuery UI. While functional, it carries a heavier library load compared to this module's Vanilla JS approach.
• Datetime Flatpickr: Uses the lightweight Flatpickr library. It is excellent for single date/range selection but does not focus on the "bulk list" storage logic found in Multiple Dates.
• Date Recur: Best for repeating events (e.g., "every Tuesday"). Use Multiple Dates instead if your dates are arbitrary and do not follow a mathematical pattern.
• Calendar Multi Select: Provides a global configuration for dates but is less flexible as a field-level entity solution.

Support & Contributing

If you encounter bugs, need help with configuration, or have feature requests (such as recurring date patterns or integration with Search API), please interact with us through the following channels:

• Issue Queue: Report bugs or request features on the official Multiple Dates Issue Queue.
• Contributions: Merge requests are welcome! Please ensure any JavaScript changes follow the Drupal coding standards and do not introduce external dependencies.

Troubleshooting

If you encounter issues during implementation, check the following common areas:

• Dates Not Saving: Verify that the "Internal Format" in the widget settings matches your expected input (default is yy-mm-dd).
• Styling Conflicts: If the calendar appearance is inconsistent, check if your theme overrides CSS variables; use --mdp-accent to adjust the primary color.
• Library Loading: Ensure the multiple_dates/multiple_dates library is being called and check the browser console for JavaScript conflicts.