Date Field

Enter dates directly into this field, perfect for logging events or deadlines with the precision of a historian noting important events.

Basic

A date field allows users to enter and adjust date and time values using a keyboard. Each part of the date is shown in its own editable segment.

Event date
mm
dd
yyyy

Installation

In the terminal, run the following command to begin:
npx hq-kit add date-field

Controlled

In a controlled date field, the value must be passed as a prop, and the field is not directly editable by the user.

Friday, November 22, 2024

2024-11-22

Event date
11
22
2024

Date Time Field

You can also use the date field to select both date and time.

Event date
11
22
2024
07
21

Validation

When validation is applied, the date field will show a validation message if the entered value is invalid.

Event date
mm
dd
yyyy

Disabled

A disabled date field is non-interactive and visually represented in a disabled state.

Event date
mm
dd
yyyy