Easy Datepicker

Easy Datepicker

A lightweight, dependency-free datepicker for Drupal that fixes one specific, common complaint: selecting an old date with the native HTML5 date input is painful. Picking a birthdate from decades ago means either scrolling a tiny calendar back one month at a time, or fighting the browser's built-in year spinner. Easy Datepicker replaces that with a calendar you can drill straight from days → months → years, paging 12 years at a time once you're there — reaching 1957 from today takes a couple of clicks, not sixty.

Why not just use the core Date element or a JS library?

• The core/Webform Date element renders the same native <input type="date"> this module exists to move away from.
• Libraries like jQuery UI's datepicker are deprecated in Drupal core, and third-party libraries like Flatpickr mean pulling in an external JS dependency and its own maintenance/security surface.

Easy Datepicker has zero dependencies — no jQuery, no jQuery UI, no external library. It's a single small JS file that progressively enhances a plain text field, and degrades to a normal text input if JavaScript is unavailable.

Features

• Fast old-date navigation. Click the calendar header once to drill into a month grid, again for a year grid you can page 12 years at a time.
• Direct typing. Type a date straight into the field (e.g. 08082026) and it auto-formats as you go (08/08/2026), the same feel as the native input's segmented entry — no need to touch the calendar at all if you already know the date.
• Today / Clear buttons in the calendar footer.
• Five configurable display formats: mm/dd/yyyy, dd/mm/yyyy, yyyy-mm-dd, dd-mm-yyyy, mm-dd-yyyy.
• Values always stored as Y-m-d, regardless of display format — matching Webform's native Date element storage convention, so CSV exports and conditional logic elsewhere in a form keep working unchanged.
• Site-wide admin settings (/admin/config/content/easydatepicker): default minimum/maximum date, "stop future date selection", "stop past date selection", and default date format — overridable per field.
• WCAG 2.1 AA accessible: proper contrast ratios, aria-current/aria-pressed state (not color alone), a live region announcing view changes and selections, and arrow-key navigation within the calendar grid (Left/Right/Up/Down/Home/End) beyond the strict Tab-only minimum.
• Themeable via CSS custom properties (--cdp-accent, etc.) — no need to override the module's CSS directly.

Three ways to use it

1. Form API element — #type => 'easydatepicker' in any custom form, Webform or otherwise.
2. Webform Text field — add the CSS class js-easydatepicker to any Webform "Text field" element's Attributes. Webform's native Date element is left completely untouched by this module; nothing about it is altered or hijacked.
3. Public API for other modules — call easydatepicker_attach() directly on any text-based element from your own hook_form_alter(), or implement hook_easydatepicker_options_alter() to programmatically adjust the resolved date range/format for any field. See easydatepicker.api.php for full documentation and examples.

Requirements

• Drupal 10.2+ or Drupal 11
• No external libraries or dependencies
• Optional: the Webform module, for the Webform Text field integration (the module works standalone without it)

Installation

Install as you would normally install a contributed Drupal module. See Installing Modules for further information.

Configuration

1. Enable the module.
2. Visit /admin/config/content/easydatepicker to set site-wide defaults (date range, future/past restrictions, display format).
3. Visit /easydatepicker/demo to try the widget immediately, or add #type => 'easydatepicker' to a custom form, or the js-easydatepicker class to a Webform Text field.