Date Picker

Date-related inputs available in packages/ui/src/common/data-input/dates.

Installation

pnpm dlx shadcn@latest add calendar popover

Usage

import { DatePicker } from "@hoag/ui/date-picker";
 
<DatePicker
  mode="single"
  value={new Date()}
  onChange={(date, formatted) => {
    console.log(date, formatted);
  }}
/>;

Examples

Single Date

import { DatePicker } from "@hoag/ui/date-picker";
 
<DatePicker mode="single" value={new Date()} />;

Date Range

import { DatePicker } from "@hoag/ui/date-picker";
 
<DatePicker mode="range" range={{ from: "01/01/2026", to: "15/01/2026" }} />;

Date Field

import { DateField } from "@hoag/ui/date-field";
 
<DateField label="Ngày sinh" placeholder="dd/MM/yyyy" strictValidation />;

Time Picker

import { TimePicker } from "@hoag/ui/time-picker";
 
<TimePicker value="08:30" />;

API Reference

Component	Purpose
`DatePicker`	Calendar picker for single date or range mode.
`DateField`	Input-based date entry with optional strict validation.
`TimePicker`	Time-only input for schedule/time selection.
`DateTimePicker`	Combined date and time selection component.
`DateInput`	Low-level typed date input utility.
`DateRangeInput`	Low-level typed date range input utility.

Toast Date Field