Date Picker

A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.

Installation

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add date-picker

Basic

A date picker combines a DateField with a Calendar popover, allowing users to either type in or select a date and time.

View

Code

Event date

mmddyyyy

Date and Time

View

Code

Event date

7220251417

Controlled

View

Code

Wednesday, July 2, 2025

2025-07-02

Event date

722025

Validation

View

Code

Custom Validation

The validate function is your go-to for custom validation rules. It checks the current date value and returns an error message string or strings if the value doesn't meet your criteria.

View

Code