HQ UI

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

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.

Date and Time

Controlled

Validation

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.