DatePicker
A responsive, locale-aware date selector calendar dropdown. Leverages the browser's native Intl.DateTimeFormat API to handle calendar months, year selects, and locales dynamically without heavy localization bundles.
1. Default Browser Locale
Detects the user's primary browser language setting automatically.
2. French Locale (data-locale="fr-FR")
Translates headers to French months (e.g. "juillet") and custom placeholders.
3. Custom Input Formatting
Initializes from database YYYY-MM-DD formats, displays as DD-MM-YYYY, and maintains clean synchronizations.
<!-- 1. Default Locale datepicker -->
<div data-role="datepicker" style="width: 250px;"></div>
<!-- 2. French Locale datepicker -->
<div data-role="datepicker" data-locale="fr-FR" data-placeholder="Choisir une date..."></div>
<!-- 3. Custom source & output database formatting -->
<div data-role="datepicker" data-source-format="YYYY-MM-DD" data-output-format="DD-MM-YYYY" style="width: 250px;">
<input type="text" value="2026-07-15">
</div>
Usage Reference & API Options
Configure the DatePicker using the following parameters on your HTML wrapper:
| Attribute | Values | Description |
|---|---|---|
| data-role="datepicker" | HTML Attribute | Identifies element as a DatePicker wrapper for automatic scanning and binding. |
| data-locale | BCP-47 tag (e.g. "es-ES") |
Specifies calendar translations. Defaults to browser language if omitted. |
| data-placeholder | Any string | Sets default input field text (default: "Select Date..."). |
| data-source-format | Format (e.g. "YYYY-MM-DD") |
Format read and written during database parsing. Default: "YYYY-MM-DD". |
| data-output-format | Format (e.g. "DD-MM-YYYY") |
Format displayed inside the text input to the user. Default: "DD-MM-YYYY". |