---
title: "Date Input Component"
slug: "date-input-component"
updated: 2025-12-04T19:11:45Z
published: 2025-12-04T19:11:45Z
canonical: "docs.unqork.io/date-input-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Date Input Component

UDesignerClassic Designer

The **Date Input component** lets your end-user enter or select a date from a specific date range. By default, all Date Input entries store using the YYYY-MM-DD format and include a timestamp of midnight (00:00) in Coordinated Universal Time. This ensures all date-related [data](/v1/docs/introduction-to-data-types-and-structures) stores in a consistent and standardized way.

Here are some examples of when you would use a Date Input [component](/v1/docs/module-builder-component-library):

- Collecting date of birth.
- Setting a minimum age for an application.
- Noting a date of service or period of employment.
- Recording the date of signing.
- Setting an effective date (from/to), first date, or last date.

## About the Configuration Window

> To learn more about general component settings and those that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Settings

### Field Text

[![A static image dispaying the Date Input component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)

| Setting | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |
| **Placeholder Text** | A short prompt telling end-users the expected value of an input field. For example, `Enter your Social Security Number`. Placeholder Text displays inside the input field until the end-user begins an entry. |

### Contextual Help

| Setting | Description |
| --- | --- |
| **Tooltip** | A short hint that displays when an end-user positions their cursor over the ![Questionmark Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Tooltip(1).jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) (**Tooltip**) icon. Tooltips can display across more than one line. |

### Default State Options

| Setting | Description |
| --- | --- |
| **Hide Label** | Setting Hide Label to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)** hides Label Text from displaying in Express View. Your Label Text still displays in the Module Builder. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)**. |
| **Hide Field** | Displays or hides the component from view. Setting Hide Field to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)** hides the component in Express View. Setting it to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)** displays the component. The component is always visible in the Module Builder. By default, Hide Field is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)**. |

### Formatting

| Setting | Description |
| --- | --- |
| Autocomplete | Autocomplete detects end-user data saved in a browser and uses it to fill relevant fields. For example, in Express View, if there is a field labeled **First Name**, and an end-user clicks into the field, the end-user's browser autofill function suggests first names saved to the browser. By default, Autocomplete is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**. |
| **Autocomplete Value** | When Autocomplete is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**, the Autocomplete Value drop-down displays. Use this drop-down to select an ARIA role to better direct the autocomplete feature when an end-user clicks on a field. For example, selecting address-line1 helps the browser determine that the field should autofill with the first line of an address. > To learn more about supported ARIA values in Unqork, view our [Autocomplete](/v1/docs/autocomplete-reference-guide) reference guide. |
| **Date Format** | Use this setting to change the format of the Placeholder Text or any dates selected in Calendar View. Possible values are `m`, `d`, `y`, and `Y` (use each value only once). For example, `Ydm`, `ymd`, or `mY`. Entering `ymd` results in a date format of `YY/MM/DD`. Entering Ymd results in a date format of `YYYY/MM/DD`. > [!NOTE] > This setting only affects how the date displays in Express View. Values store in ISO 8601 format. |
| **Display (+/-) Years from the Current Date** | Sets the maximum number of years available in the date picker calendar. |
| **Field Delimiter** | Delimiters show the breaks between the month, day, and year in a date. Common delimiters include a period (`.`), slash (`/`), or hyphen (`-`). By default, the Field Delimiter is set to `/`. |

### Input Behavior

| Setting | Description |
| --- | --- |
| **Input Behavior** | Controls how end-users interact with the component. Choose from the following options: - **Enable User Input**: Allow end-users to view and enter data in this field. - **Disable User Input**: Prevents end-users from entering data in the field, but lets them view it. In the Module Builder, the field’s background displays as gray. In Express View, when end-users hover over the field, their cursor displays with a **prohibited** symbol. - **Read Only - Legacy**: Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays `None`. - **Read Only - Accessible**: Makes the field non-editable and applies the `readonly` HTML attribute, which notifies screen readers that the field cannot be modified. |

## Data Settings

### Data Storage

[![A static image displaying the Date Input's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)

| Setting | Description |
| --- | --- |
| **Store Data in Database** | The Store Data in Database setting affects how data persists through your application. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**, Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: - Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. - Triggering a module save event using a Button component with an Action Type of Save. - Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. > [!NOTE] > By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)** when you don’t want to store the values from this field in the database. > [!NOTE] > When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. > [!TIP] > Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the **Enable Tracker** and **Track Value** toggles are set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)** in Module Settings, only values from fields with Store Data in Database enabled are tracked. |
| **Store Date Only** | Unqork stores all dates in ISO8601 format with or without the timestamp based on the Store Date Only setting. That way, dates are always passed as either `YYYY-MM-DDThh:mm:ss.sssZ` or `YYYY-MM-DD` when using logic components. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**, the system only stores the selected date. By default, Store Date Only is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)**. |

## Actions Settings

### Triggers

[![A static image displaying the Date Input's Actions settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)

| Setting | Description |
| --- | --- |
| **Trigger** | To set up a trigger, enter the Property ID of your chosen logic component into this field. When the end-user performs an action on the current component, the triggered component fires. |

## Validation Settings

### Valid Date

[![A static image displaying the Date Input's Validation settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)

| Setting | Description |
| --- | --- |
| **Error Message** | Displays as a custom error message when the end-user enters an invalid date. |

### User Input

| Setting | Description |
| --- | --- |
| **Required** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**, the end-user must enter a value in the component's visible fields. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)**, the input is optional. By default, Required is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)**. |
| **Required Error Message** | A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field. |

## Advanced Settings

### Additional Validation Options

[![A static image displaying the Input component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)

#### Restrict Date Selection To

The **Restrict Date Selection To** setting lets you set date restrictions to prevent end-users from choosing invalid values. For example, use the **Restrict Date Selection To** setting to require a minimum age for end-users, or to schedule for dates only in the future.

##### None

No validation restrictions apply, and end-users can select or enter any date into the Date Input component.

##### Future Only

Specify a date range where end-users only select dates that exist on or after the current date.

| Setting | Description |
| --- | --- |
| **Minimum Date Error Message** | Displays as a custom error message when the end-user enters a date that exists after the current date. |
| **Choose Date** | All future dates of the current date are accepted. To choose a date in the future and to accept all dates after it, use the **After a Date** setting. |

##### Past Only

Specify a date range where end-users only select dates that exist on or before the current date.

| Setting | Description |
| --- | --- |
| **Maximum Date Error Message** | Displays as a custom error message when the end-user enters a date that exists before the current date. |
| **Choose Date** | All past dates of the current date are accepted. To choose a date in the past and to accept all dates that come before it, use the **Before a Date** setting. |

##### Before a Date

Specify a date range where end-users can only select dates that exist before the chosen date specified in the **Choose Date** field.

| Setting | Description |
| --- | --- |
| **Minimum Date Error Message** | Displays as a custom error message when the end-user enters a date that exists after the **Choose Date** value. |
| **Choose Date** | Enter or select a date the Date Input component validates against. If an end-user enters a date that exists after the **Choose Date** value, the **Minimum Date Error Message** value displays. End-users using Calendar View cannot select dates that exist after the **Choose Date** value. |

##### After a Date

Specify a date range where end-users can only select dates that exist after the chosen date specified in the **Choose Date** field. End-Users can also select dates in the future.

| Setting | Description |
| --- | --- |
| **Maximum Date Error Message** | Displays as a custom error message when the end-user enters a date that exists before the **Choose Date** value. |
| **Choose Date** | Enter or select a date the Date Input component validates against. If an end-user enters a date that exists before the **Choose Date** value, the **Minimum Date Error Message** value displays. End-users using Calendar View cannot select dates that exist before the **Choose Date** value. |

##### Between Dates

The Between Dates setting offers the greatest flexibility for dictating which dates an end-user can choose.

| Setting | Description |
| --- | --- |
| **Minimum Date Error Message** | Displays as a custom error message when the end-user enters an invalid date. |
| **From** | Specifies the from date. Use the drop-down menu to apply more restrictions to the beginning of your date range: - **Absolute Date**: Choose the oldest date the end-user is allowed to enter. - **Relative Date**: Choose the earliest relative date the end-user is allowed to enter. This setting aslo accepts negative values. - **Now**: Sets the current date as your starting date. - **+∞** **(Past Only)**: Accepts all dates from the past. |
| **Maximum Date Error Message** | Displays as a custom error message when the end-user enters an invalid date. |
| **Until** | This field displays on selection of the **Between Dates** setting. Use the drop-down menu to apply more restrictions to the beginning of your date range: - **Absolute Date**: Choose the earliest date the end-user is allowed to enter. - **Relative Date**: Choose the latest relative date the end-user is allowed to enter. This setting also accepts negative values. - **Now**: Sets the current date as your starting date. - **+∞** **(Future Only)**: Accepts all dates in the future. |

### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |
| **Disable Browser Autofill** | Setting the toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)** stops the browser from autofilling the field. When a user clicks the field, they must enter the value instead of having it autofill by the browser. Use this setting in all fields containing sensitive data. > [!NOTE] > Some browsers might not support this setting. By default, the Disable Browser Autofill toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)**. |
| **Disable Calendar View** | ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)** |

## Adding a Date Input Component

Set up a Date Input component that collects date of birth information. Use Validation settings to require the end-user to be older than 18 years of age, but younger than 117 years.

These instructions assume that you have an open module saved with a title.

### Configure the Date Input Component

[![A static image displaying the Date Input components configuration window. The "Restrict Date Selection" To setting is highlighted and filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dateInput_example1_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dateInput%20example1.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)

1. In the Module Builder, drag and drop a **![Date Input Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/date_teal_icon(3).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) Date Input** component onto your canvas.
2. In the Property ID field, enter **dateOfBirth**.
3. In the Label Text field, enter `Date of Birth`.
4. Navigate to the component's **Data** settings.
5. Under **Data Storage**, set **Store Date Only** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**.
6. Navigate to the component's **Validation** settings.
7. Under **User Input**, set **Required** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**.
8. Navigate to the component's **Advanced** settings.
9. In the **Restrict Date selection to** drop-down, select **Between Dates**.
10. In the **Minimum Date Error Message** field, enter `You must be younger than 117 years of age to apply.`.
11. In the **From** drop-down, select **Relative Date**. The relative date field and Days/Months/Years drop-down display.
12. In the **Relative Date** field, enter `-117`.
13. From the **Days/Months/Years** drop-down, select **Years**.
14. In the **Maxmimum Date Error Message** field, enter `You Must be at least 18 years of age to apply.`.
15. In the **Relative Date** field, enter `-18`.
16. From the **Days/Months/Years** drop-down, select **Years**.
17. Under **Additional Styling**, set **Disable Calendar View** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**.
18. Click **Save Component**.
19. **Save** your module.

Once implemented, your Date Input component looks like the following in Express View:

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DateInput_Component_example_expressview.webm?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)

## Structure of a Date Input Component's Data

The data structure of a Date Input is a key/value pair. The key is the Property ID name of the component, and the value is stored as a string. By default, the value includes the date and timestamp. To remove the timestamp from the stored value, set the **Store Date Only** setting to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**.

[![A static image of the Console Inspect view, the data structure for a saved Date Input component is displayed.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DateInput_Component_dataStructure_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DateInput%20Component%20dataStructure.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)

The **Date Input component** lets your end-user enter or select a date from a specific date range. By default, all Date Input entries store using the YYYY-MM-DD format and include a timestamp of midnight (00:00) in Coordinated Universal Time. This ensures all date-related [data](/v1/docs/introduction-to-data-types-and-structures) stores in a consistent and standardized way.

Here are some examples of when you would use a Date Input [component](/v1/docs/module-builder-component-library):

- Collecting date of birth.
- Setting a minimum age for an application.
- Noting date of service or period of employment.
- Recording date of signing.
- Setting an effective date (from/to), first date, or last date.

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DateInput_Component_Intro.webm?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)

## About the Configuration Window

> To learn more about general component settings and those that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Panel

[![A static image dispaying the Date Input component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/classic_Display_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/classic%20Display.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)

### Field Text

| Setting | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |
| **Placeholder Text** | A short prompt telling end-users the expected value of an input field. For example, `Enter your Social Security Number`. Placeholder Text displays inside the input field until the end-user begins an entry. |

### Default State Options

| Setting | Description |
| --- | --- |
| **Hide Label** | Setting Hide Label to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)** hides Label Text from displaying in Express View. Your Label Text still displays in the Module Builder. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)**. |
| **Read Only View** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**, the component is display-only. If another component sends content to the field, the end-user can view that content. Otherwise, end-users see the word `None`. By default, the Read Only View toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)**. |
| **Disable User Input** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**, end-users cannot interact with or edit the Express View's input field or element. When end-users hover over the field, their cursor changes to alert them to the status change. By default, Disable User Input is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)**. |
| **Hide Field** | Displays or hides the component from view. Setting Hide Field to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)** hides the component in Express View. Setting it to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)** displays the component. The component is always visible in the Module Builder. By default, Hide Field is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)**. |

### Contextual Help

| Setting | Description |
| --- | --- |
| **Tooltip** | A short hint that displays when an end-user positions their cursor over the ![Questionmark Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Tooltip(1).jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) (**Tooltip**) icon. Tooltips can display across more than one line. |

### Formatting

| Setting | Description |
| --- | --- |
| **Date Format** | Use this setting to change the format of the Placeholder Text or any dates selected in Calendar View. Possible values are `m`, `d`, `y`, and `Y` (use each value only once). For example, `Ydm`, `ymd`, or `mY`. Entering `ymd` results in a date format of `YY/MM/DD`. Entering Ymd results in a date format of `YYYY/MM/DD`. > [!NOTE] > This setting only affects how the date displays in Express View. Values store in ISO 8601 format. |
| **Display (+/-) Years from the Current Date** | Sets the maximum number of years available in the date picker calendar. |
| **Field Delimiter** | Delimiters show the breaks between the month, day, and year in a date. Common delimiters include a period (`.`), slash (`/`), or hyphen (`-`). By default, the Field Delimiter is set to /. |

### Autocomplete

| Setting | Description |
| --- | --- |
| Autocomplete | Autocomplete detects end-user data saved in a browser and uses it to fill relevant fields. For example, in Express View, if there is a field labeled **First Name**, and an end-user clicks into the field, the end-user's browser autofill function suggests first names saved to the browser. By default, Autocomplete is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**. |
| **Autocomplete Value** | When Autocomplete is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**, the Autocomplete Value drop-down displays. Use this drop-down to select an ARIA role to better direct the autocomplete feature when an end-user clicks on a field. For example, selecting **address-line1** helps the browser determine that the field should autofill with the first line of an address. > To learn more about supported ARIA values in Unqork, view our [Autocomplete](/v1/docs/autocomplete-reference-guide) reference guide. |

## Data Panel

[![A static image dispaying the Date Input component's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DateInput_Component_Data_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DateInput%20Component%20Data.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)

### Data Storage

| Setting | Description |
| --- | --- |
| **Store Date Only** | Unqork stores all dates in ISO8601 format with or without the timestamp based on the Store Date Only setting. That way, dates are always passed as either `YYYY-MM-DDThh:mm:ss.sssZ`or `YYYY-MM-DD` when using logic components. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**, the system only stores the selected date. By default, Store Date Only is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)**. |
| **Store Data in Database** | The Store Data in Database setting affects how data persists through your application. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**, Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: - Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. - Triggering a module save event using a Button component with an Action Type of Save. - Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. > [!NOTE] > By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)** when you don’t want to store the values from this field in the database. > [!NOTE] > When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. > [!TIP] > Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the **Enable Tracker** and **Track Value** toggles are set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)** in Module Settings, only values from fields with Store Data in Database enabled are tracked. |

## Actions Panel

[![A static image dispaying the Date Input component's Actions settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DateInput_Component_Actions_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DateInput%20Component%20Actions.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)

### Triggers

| Setting | Description |
| --- | --- |
| **Trigger** | To set up a trigger, enter the Property ID of your chosen logic component into this field. When the end-user performs an action on the current component, the triggered component fires. |

## Validation Panel

[![A static image dispaying the Date Input component's Validation settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DateInput_Component_Validation_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DateInput%20Component%20Validation.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)

### User Input

| Setting | Description |
| --- | --- |
| **Required** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**, the end-user must enter a value in the component's visible fields. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)**, the input is optional. By default, Required is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)**. |
| **Required Error Message** | A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field. |

### Valid Date

| Setting | Description |
| --- | --- |
| **Error Message** | Displays as a custom error message when the end-user enters an invalid date. |

## Advanced Panel

[![A static image dispaying the Date Input component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DateInput_Component_Advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DateInput%20Component%20Advanced.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)

### Additional Validation Options

### Restrict Date Selection To

The **Restrict Date Selection To** setting lets you set date restrictions to prevent end-users from choosing invalid values. For example, use the **Restrict Date Selection To** setting to require a minimum age for end-users, or to schedule for dates only in the future.

#### None

No validation restrictions apply, and end-users can select or enter any date into the Date Input component.

#### Future Only

Specify a date range where end-users only select dates that exist on or after the current date.

| Setting | Description |
| --- | --- |
| **Minimum Date Error Message** | Displays as a custom error message when the end-user enters a date that exists after the current date. |
| **Choose Date** | All future dates of the current date are accepted. To choose a date in the future and to accept all dates after it, use the **After a Date** setting. |

#### Past Only

Specify a date range where end-users only select dates that exist on or before the current date.

| Setting | Description |
| --- | --- |
| **Maximum Date Error Message** | Displays as a custom error message when the end-user enters a date that exists before the current date. |
| **Choose Date** | All past dates of the current date are accepted. To choose a date in the past and to accept all dates that come before it, use the **Before a Date** setting. |

#### Before a Date

Specify a date range where end-users can only select dates that exist before the chosen date specified in the **Choose Date** field.

| Setting | Description |
| --- | --- |
| **Minimum Date Error Message** | Displays as a custom error message when the end-user enters a date that exists after the **Choose Date** value. |
| **Choose Date** | Enter or select a date the Date Input component validates against. If an end-user enters a date that exists after the **Choose Date** value, the **Minimum Date Error Message** value displays. End-users using Calendar View cannot select dates that exist after the **Choose Date** value. |

#### After a Date

Specify a date range where end-users can only select dates that exist after the chosen date specified in the **Choose Date** field. End-Users can also select dates in the future.

| Setting | Description |
| --- | --- |
| **Maximum Date Error Message** | Displays as a custom error message when the end-user enters a date that exists before the **Choose Date** value. |
| **Choose Date** | Enter or select a date the Date Input component validates against. If an end-user enters a date that exists before the **Choose Date** value, the **Minimum Date Error Message** value displays. End-users using Calendar View cannot select dates that exist before the **Choose Date** value. |

#### Between Dates

The Between Dates setting offers the greatest flexibility for dictating which dates an end-user can choose.

| Setting | Description |
| --- | --- |
| **Minimum Date Error Message** | Displays as a custom error message when the end-user enters an invalid date. |
| **From** | Specifies the from date. Use the drop-down menu to apply more restrictions to the beginning of your date range: - **Absolute Date**: Choose the oldest date the end-user is allowed to enter. - **Relative Date**: Choose the earliest relative date the end-user is allowed to enter. This setting aslo accepts negative values. - **Now**: Sets the current date as your starting date. - **+∞** **(Past Only)**: Accepts all dates from the past. |
| **Maximum Date Error Message** | Displays as a custom error message when the end-user enters an invalid date. |
| **Until** | This field displays on selection of the **Between Dates** setting. Use the drop-down menu to apply more restrictions to the beginning of your date range: - **Absolute Date**: Choose the earliest date the end-user is allowed to enter. - **Relative Date**: Choose the latest relative date the end-user is allowed to enter. This setting also accepts negative values. - **Now**: Sets the current date as your starting date. - **+∞** **(Future Only)**: Accepts all dates in the future. |

#### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |
| **Disable Browser Autofill** | Setting the toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)** stops the browser from autofilling the field. When a user clicks the field, they must enter the value instead of having it autofill by the browser. Use this setting in all fields containing sensitive data. > [!NOTE] > Some browsers might not support this setting. By default, the Disable Browser Autofill toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)**. |
| **Disable Calendar View** | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)** to remove the calendar view widget from the field. With the calendar view widget removed, the end-user must manually type in the date. By default, Disable Calendar View is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(OFF)**. |

## Adding a Date Input Component

Set up a Date Input component that collects date of birth information. Use Validation settings to require the end-user to be older than 18 years of age, but younger than 117 years.

These instructions assume that you have an open module saved with a title.

### Configure the Date Input Component

[![A static image displaying the Date Input components configuration window. The "Restrict Date Selection" To setting is highlighted and filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DateInput_Component_Example_dateinput_3_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DateInput%20Component%20Example%20dateinput%203.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)

1. In the Module Builder, drag and drop a **![Date Input Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/date_teal_icon(3).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) Date Input** component onto your canvas.
2. In the Property ID field, enter **dateOfBirth**.
3. In the Label Text field, enter Date of Birth.
4. Click **![Data Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_teal_icon(2).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) Data**.
5. Under **Data Storage**, set **Store Date Only** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**.
6. Click **![Advanced Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced_teal_icon(1).png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) Advanced**.
7. In the **Restrict Date selection to** drop-down, select **Between Dates**.
8. In the **Minimum Date Error Message** field, enter `You must be younger than 117 years of age to apply`.
9. In the **From** drop-down, select **Relative Date**. The relative date field and Days/Months/Years drop-down display.
10. In the **Relative Date** field, enter -117.
11. From the **Days/Months/Years** drop-down, select **Years**.
12. In the **Maxmimum Date Error Message** field, enter You Must be at least 18 years of age to apply.
13. In the **Relative Date** field, enter -18.
14. From the **Days/Months/Years** drop-down, select **Years**.
15. Under **Additional Styling**, set **Disable Calendar View** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON)**.
16. Click **Save & Close**.
17. **Save** your module.

Once implemented, your Date Input component looks like the following in Express View:

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DateInput_Component_example_expressview.webm?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)

## Structure of a Date Input Component's Data

The data structure of a Date Input is a key/value pair. The key is the Property ID name of the component, and the value is stored as a string. By default, the value includes the date and timestamp. To remove the timestamp from the stored value, set the **Store Date Only** setting to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D) **(ON**).

[![A static image of the Console Inspect view, the data structure for a saved Date Input component is displayed.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DateInput_Component_dataStructure_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DateInput%20Component%20dataStructure.jpg?sv=2026-02-06&spr=https&st=2026-11-06T21%3A38%3A08Z&se=2026-11-06T22%3A38%3A08Z&sr=c&sp=r&sig=FfccaeUknfJ1H3dmLtplpv5qrxs1C23CSqh3OQoU%2BJo%3D)

## Resources

- [Modify the Date Input component using the toolbar settings](/v1/docs/component-toolbar-settings).
- [Cheatsheet: Manipulating Dates with Moment.js](/v1/docs/manipulating-dates-with-momentjs).
- [Introduction to Primary Field Components](/v1/docs/introduction-to-primary-fields).

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Coordinated Universal Time (UTC) is a standard, globally-accepted timezone used to regulate clocks and time around the world.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.