Date & time fields

Date, time and range selection with a shared calendar surface and keyboard support.

Choose the right control

Compare a date, a date range and a clock. Open any input to try its keyboard and calendar controls.

Date picker

Calendar selection; clear the value with ×.

Date range picker

Choose endpoints; Apply commits, Cancel keeps the previous value.

Time picker

24-hour display; stored as HH:mm.

Date and time together

Select both a day and a time, including seconds or a list of allowed appointment times.

Date and time · 12h

A calendar with its own time column.

Date and time with seconds

Second precision in both display and stored value.

Appointment slots

Only 09:15, 11:40 and 15:10 can be accepted.

Periods and elapsed time

A month, a year and an elapsed duration have different storage formats and selection controls.

Month

Stores YYYY-MM, without inventing a selected day.

Year

Only 2020–2030.

Elapsed duration

More than 24 hours; 15-minute step buttons.

Ranges and regional formats

Compare a timed period, opening hours and a localized date. See the dedicated galleries for more combinations.

Range with time

No shortcuts; independent start and end time.

Opening hours

Both endpoints must fit within 08:00–20:00.

Localized date

Polish labels; Monday is the first day of the week.

Try real validation

These buttons run the actual server-side field rules. Show error loads a rejected example; Use valid value fixes only that field.

Required date^*

An empty value is rejected. Choose a date or use the valid example.

Checking…

Working-day appointment

October only; weekends and October 16 are blocked.

Checking…

Restricted time

12:00 is rejected even if supplied outside the menu.

Checking…

Presentation and field states

Compare the same input at three sizes. The detailed galleries also include read-only, disabled, empty and invalid states.

Small · primary

Medium · secondary

Large · flat

Timezones and recurring availability

Timezone selection and recurring opening hours are part of the collection too. Their galleries cover browser defaults, restrictions, breaks and overnight shifts.

Timezone

Warsaw, Poland

Search IANA timezone identifiers using FLEX Select.

Recurring availability

Timezone

Monday Open

Slot 1

From

Tuesday Open

Slot 1

From

Wednesday Open

Slot 1

From

Enable days, add slots and choose their timezone.

Information

Developer: FLEX
Category: Date & time
Website