Date Time Picker

Combines calendar date selection and time selection in a single input. Supports 12-hour/24-hour formats, configurable minute steps, min/max date and time boundaries, and an optional label and helper text.

Installation

1. Copy the source code:

Source: packages/ui/src/common/data-input/dates/date-time-picker.tsx
Place in your project: components/common/data-input/dates/date-time-picker.tsx

2. Install dependencies:

npm install date-fns

3. Update the import paths to match your project structure.

Usage

import { DateTimePicker } from "@hoag/ui/date-time-picker";
 
export default function Demo() {
  const [value, setValue] = React.useState<{ date?: Date; time?: string }>({});
  return <DateTimePicker label="Thời gian" value={value} onChange={setValue} />;
}

Default

<DateTimePicker onChange={(v) => console.log(v)} />

24-hour vs 12-hour Format

{
  /* 24-hour (default) */
}
<DateTimePicker onChange={setValue} />;
 
{
  /* 12-hour format */
}
<DateTimePicker use12HourFormat onChange={setValue} />;

With Label and Helper Text

Thời gian hẹn

Chọn ngày và giờ cho cuộc hẹn

<DateTimePicker
  label="Thời gian hẹn"
  helperText="Chọn ngày và giờ cho cuộc hẹn"
  onChange={setValue}
/>

Minute Step

Dùng minuteStep để bước nhảy phút (ví dụ: 15 cho các mốc 0, 15, 30, 45).

Đặt lịch (bước 15 phút)

<DateTimePicker minuteStep={15} onChange={setValue} />

Disabled

<DateTimePicker disabled onChange={setValue} />

API Reference

`<DateTimePicker>`

Prop	Type	Default	Description
`value`	`{ date?: Date; time?: string }`	—	Controlled date+time value
`onChange`	`(value: { date?: Date; time?: string }) => void`	—	Callback when value changes (required)
`use12HourFormat`	`boolean`	`false`	Use 12-hour time format with AM/PM
`minuteStep`	`number`	`30`	Minute step interval in time selector
`label`	`string`	—	Input label text
`placeholder`	`string`	`"Chọn ngày và thời gian"`	Input placeholder
`helperText`	`string`	—	Helper text below the input
`error`	`boolean`	`false`	Error state
`size`	`"default" \| "lg"`	`"default"`	Input size variant
`disabled`	`boolean`	`false`	Disable the picker
`minDate`	`Date`	—	Minimum selectable date
`maxDate`	`Date`	—	Maximum selectable date
`minTime`	`Date`	—	Minimum selectable time
`maxTime`	`Date`	—	Maximum selectable time
`hasRemoveIcon`	`boolean`	`true`	Show remove icon when there is a value
`onClearValue`	`() => void`	—	Callback when clear button is clicked
`modal`	`boolean`	`false`	Render popover as modal
`className`	`string`	—	Custom CSS class

Date Picker Time Picker