Skip to main content

Date Field

The Date Field component offers users a clean, flexible way to select dates, times, or ranges. It includes support for various picker modes, time formats, and detailed validation options.

Image

Properties

The following properties are available to configure the behavior of the component from the form editor (this is in addition to common properties).

Common

Range boolean

Enable to allow selecting a range of dates instead of a single date.

Placeholder string/function

Shows hint text inside the input to guide users on what to enter.


Data

Picker object

Choose the mode of the picker:

  • date (default): Pick a single calendar date.

  • week: Select a week of the year.

  • month: Pick a specific month.

  • quarter: Select a business quarter.

  • year: Pick an entire year.

Resolve to UTC boolean

Automatically convert the selected date and time to UTC.

Show Time boolean

Enable this to allow users to select a time along with the date.

Show Today/Now boolean

Display a shortcut for today’s date or the current time.

Disabled Date Mode boolean

Choose a method for disabling dates:

  • None (default): All dates selectable.

  • Function Template: Use predefined templates to disable dates.

  • Custom Function: Write custom JavaScript to decide which dates to disable.

Date Format string/ function

Defines the format for dates (default: DD/MM/YYYY).

Time Format string/ function

Defines the time display format (default: HH:mm:ss).

Year Format string/ function

Specifies the format for year selection (default: YYYY).

Quarter Format string/ function

Sets the format for quarter picking (default: YYYY-\QQ).

Month Format string/ function

Format used when selecting a month (default: YYYY-MM).

Week Format string/ function

Format used when selecting a week (default: YYYY-wo).