Date picker - Flex Demo

Single dates, guided entry and date/time appointments.

Selection and guided typing

Use calendar selection, numeric date segments, or enable both. Typed entry follows the visible day/month/year pattern.

Calendar selection

Typing is disabled; clicking the whole input opens the calendar.

Guided numeric date

15 10 2026

Arrow keys adjust a segment; letters cannot become date values.

Calendar + guided entry

15 10 2026

Use either the segments or the calendar.

Availability rules

These restrictions apply to calendar selection and server validation. The availability callback can use your own booking policy.

October only

Dates outside October 2026 are disabled.

Weekdays and blackouts

Saturday, Sunday, October 16 and October 23 are unavailable.

Custom availability

The PHP callback blocks every Friday.

Calendar layout

Compare an inline calendar, a compact variable-height calendar and a picker that stays open after a selection.

Inline calendar

Always visible; no dropdown is needed.

Compact month

No extra fixed rows or days from neighboring months.

Keep calendar open

Choose another day without opening the menu again.

Date and time

The time column supports 12/24-hour clocks, seconds, allowed slots, a default time and datetime bounds.

Date and time · 24h

Date and time · 12h

Date and time with seconds

Appointment workflows

Connect two date inputs through a minimum date and restrict a date/time input to explicit appointment slots.

Arrival

Changing arrival updates the minimum departure date.

Departure

Departure cannot precede the selected arrival.

Only appointment times

Weekdays at 09:15, 11:40 or 15:10.

Validation: empty, bounds and blackouts

Each example can be checked separately, without filling every required field elsewhere on this page.

Required appointment^*

Required message is customized in PHP.

Checking…

Limited appointment

November 1 fails the October maximum.

Checking…

Blackout validation

The blackout is checked on the server too.

Checking…

Validation: typed values and custom rules

Malformed dates, unavailable times and your own business rules use the same form validation lifecycle.

Impossible date

15 10 2026

February 30 cannot be accepted.

Checking…

Unavailable appointment time

A valid date is not enough when its time is unavailable.

Checking…

Your own rule

Example business rule: only even days of the month.

Checking…

Language, first weekday and calendar system

Display language and calendar labels are independent from the stored ISO date.

Polski · Monday first

English · Sunday first

Arabic · RTL

Sizes and visual variants

Small, medium and large reuse the shared FLEX text-input sizing.

Small · primary

Medium · secondary

Large · flat

Empty, read-only and disabled

An empty optional field, a readable value that cannot be changed, and a fully disabled field.

Optional empty date

Read-only date

Disabled date

React to a date change

Use onChange to update another field through the form lifecycle. Pick a different date and watch the stored ISO value update beside it.

Date with onChange

Last selected ISO value

Information

Developer: FLEX
Category: Date & time
Website