Date Input Component

The Date input component captures a date from end-users using a configurable format. It supports date range restrictions, calendar view, and stores values as date-only or with a timestamp.

How to read settings tables

The tables below describe each configurable option as it displays in the Unqork IDE. Values are formatted as follows: inline code — a value to type exactly as shown | Bold — a value selected from a drop-down, radio button, tab, or choice chip | ON/OFF — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

General Settings

Setting	Field	Type	Default	Description
Property ID	`key`	Text input	`dateinput`	The unique identifier for this component instance.

Display Settings

Field Text

Setting	Field	Type	Default	Description
Label Text	`label`	Text input	—	Identifies the component on the canvas and informs end-users what information is requested.
Placeholder Text	`placeholder`	Text input	—	Hint text displayed inside the input field to guide end-users on what to enter.

Contextual Help

Setting	Field	Type	Default	Description
Tooltip	`tooltip`	Text input	—	A brief description that displays when a cursor is positioned over the tooltip icon.

Default State Options

Setting	Field	Type	Default	Description
Hide Label	`hideComponentLabel`	Toggle	OFF	Hides the label. The label remains visible in the Module Builder.
Hide Field	`hidden`	Toggle	OFF	Hides the component from end-users but always displays in the Module Builder.

Formatting

Setting	Field	Type	Default	Description
Date Format	`format`	Text input	`mdY`	The date format using MDY tokens. Tokens are case sensitive.
Display (+/-) years from the current date	`yearrange`	Number input	`10`	The number of years shown before and after the current year in the year drop-down.
Field delimiter	`delimiter`	Text input	`/`	The character separating date parts in the input field.
Autocomplete	`disableAutoComplete`	Toggle	ON	Lets the browser suggest and autofill previously entered dates.
Autocomplete Value	`autocomplete`	Drop-down	—	Specifies the type of data the browser can autofill. Visible when Autocomplete is ON.

Input Behavior

Setting	Field	Type	Default	Description
Input Behavior	—	Drop-down	Enable User Input	Sets how end-users can interact with the field.

Enable User Input (default): End-users can type directly into the date field and interact with the calendar picker.

Display as Text (readOnlyView): Displays the stored value as plain text without the input element. Shows None when empty.

Read Only (htmlReadOnly): Makes the field non-editable while still letting end-users view, select, and copy its content.

Disable User Input (disabled): Prevents end-users from editing the field. The field displays with an altered appearance to indicate it is not editable.

Data Settings

Setting	Field	Type	Default	Description
Store Date Only	`dateonly`	Toggle	ON	Stores only the date without a timestamp. Set to OFF to store the full date-time value.
Store Data in Database	`persistent`	Toggle	ON	When set to ON, this setting this setting stores field values to the database when the module saves, end-users navigate between Panel components, or end-users navigate between workflow screens. Set to OFF to exclude this field from server-side submissions.

Note: Fields with Store Data in Database set to OFF are excluded from Plug-In Component's API responses and Unqork's built-in tracker. When using a Plug-In component to remote-execute a module, any component whose value must be included in the API response requires Store Data in Database set to ON.

Actions Settings

Triggers

Setting	Field	Type	Default	Description
	`listener`	Property ID	—	Triggers another component when the field value changes.

Validation Settings

User Input

Setting	Field	Type	Default	Description
Required	`validate.required`	Toggle	OFF	Requires a value before the module can be submitted.
Required Error Message	`errors.required`	Text input	`is required`	Displays when the required field is left empty.
Error Message	`errors.dateinput`	Text input	`must be a valid date`	Displays when the entered value is not a valid date.

Advanced Settings

Additional Validation Options

Setting	Field	Type	Default	Description
Restrict Date Selection to	`datelimit`	Drop-down	None	Limits the range of acceptable dates. Options include: None, Future dates only, Past dates only, Dates before a specified date, Dates after a specified date, Dates between a range.
↳ Maximum Date Error Message	`errors.maxdate`	Text input	—	Displays when the entered date exceeds the maximum allowed date. Visible for past and before restrictions.
↳ Minimum Date Error Message	`errors.mindate`	Text input	—	Displays when the entered date is before the minimum allowed date. Visible for future and after restrictions.

Note: When Restrict Date Selection to is set to Before, After, or Between, additional settings display for choosing absolute dates or relative date offsets (for example, +7 days from today).

Additional Styling

Setting	Field	Type	Default	Description
custom CSS class	`customClass`	Text input	—	A CSS class applied to the component for custom styling.
Disable Calendar View	`disablepicker`	Toggle	OFF	Hides the calendar picker and requires end-users to type the date directly.

Operations Builder

This component supports the Operations Builder in Vega modules. When the module or panel is set to Vega (2.0), an Event Handlers section displays in the settings panel for configuring event-driven operations.

Changelog

Date	Change
—	Initial publication.

Documentation Index