FP FormPing Documentation
Open Dashboard

04 — Customization · Date Picker

Three pickers, one click to switch.

FormPing ships its own date picker so you don't have to live with the inconsistent native one. Pick a variant per field — minimal, advanced, or native — in the field's Style tab.

Variants

Minimal (default)

A clean month grid that opens above the input. Click a day, done. No year navigation, no time picker, no clutter. Best for "when do you want to meet?" style fields.

Advanced

Adds month and year selectors, keyboard navigation, and a "today" shortcut. Use this for date-of-birth fields or anything where the user might need to jump back several years.

Native

Falls back to the browser's built-in <input type="date">. Use this if you want maximum accessibility on legacy browsers, or if your users prefer their OS's picker.

Multilingual

Day names and month names render in the form's language automatically — supported: EN, DE, FR, ES, IT, PT. No extra setup required.

Where it opens

The picker opens above the input field, with the shadow falling upward. This keeps it out of the way of fields below it on long forms and avoids the picker getting cut off by the bottom of a modal.

i

The minimal and advanced variants set the input to read-only at the DOM level so the OS keyboard doesn't pop up on mobile when you focus the field — just the picker.

Styling

The picker inherits the form's theme variables (--fp-color-primary, --fp-radius, --fp-color-bg, etc.). For finer control, use Custom CSS on the date field — your rules apply to the popover too.