Date range picker - Flex Demo

Date ranges with custom shortcuts and optional start/end times.

Built-in, hidden and custom shortcuts

The left shortcuts panel is optional. Supply your own labels and endpoints, or remove it completely.

Built-in reporting periods

Today, Yesterday, Last 7 days and the other built-in periods.

No shortcuts

The left panel is completely removed.

Custom periods

Only Autumn campaign and Launch week appear.

Layouts and entry

Choose one/two months and whether users can type a guided date pattern. Narrow viewports use the compact calendar.

One month

Two months

Guided range entry

10 10 2026 15 10 2026

Timed ranges

Independent endpoint times, second precision and explicit time lists are supported on the same range surface.

Range with time · 12h

Range with time · 24h

Timed range with seconds

Availability and same-day policy

Day restrictions apply to each endpoint. Applications can add their own rules when every interior day must be available.

Working-day endpoints

Weekend endpoints and October 16 are blocked.

Same day allowed

Dynamic shortcuts

The PHP callback resolves this month when the field is built.

Validation: required, order and completeness

Try the rejected examples to see the actual messages for empty, reversed and incomplete ranges.

Required date range^*

Both endpoints are required.

Checking…

Reversed range

The end cannot precede the start.

Checking…

Incomplete range

A start without an end is rejected.

Checking…

Validation: bounds, same-day and endpoint times

Limits are enforced on submission as well as in the menu.

October booking

The end must also fit inside October.

Checking…

At least two calendar days

Selecting the same day twice is rejected.

Checking…

Restricted endpoint times

10:00 is unavailable even though the date is valid.

Checking…

Language and width stress cases

Long display text remains contained inside the input. Open the range to see the complete endpoint summary.

Long date labels

Try this input at small viewport widths.

Polski · Monday first

Arabic · RTL

Sizes, variants and locked values

Compare compact input sizing and read-only behavior without changing the range semantics.

Small · secondary

Large · flat

Read-only range

Information

Developer: FLEX
Category: Date & time
Website