DateTimePicker

A combined date + time picker: a calendar for picking the date, paired with a scrollable hour/minute/second picker and a direct time text input, all in one popover.

Import

import { DateTimePicker } from '@flxui/uikit/business'

Basic Usage

import { DateTimePicker } from '@flxui/uikit/business'
 
function Demo() {
  return <DateTimePicker placeholder="Select time" onChange={(date) => console.log(date)} />
}

DateTimePicker is uncontrolled by default — pass value/onChange to control it, or defaultValue to seed an uncontrolled instance.

import { useState } from 'react'
import { DateTimePicker } from '@flxui/uikit/business'
 
function Demo() {
  const [value, setValue] = useState<Date>()
  return <DateTimePicker value={value} onChange={setValue} />
}

Constraining the range

startDate/endDate clamp both the calendar and the scroller picker. Values outside the range are pulled back to the nearest boundary automatically:

<DateTimePicker startDate={new Date('2026-01-01')} endDate={new Date('2026-12-31')} />

Custom formatting

format controls the display string using the package’s dayjs formatting tokens. For timezone-aware or otherwise custom display logic, use formatter instead — it receives the raw Date and returns the string to show:

<DateTimePicker format="YYYY-MM-DD HH:mm:ss" />
 
<DateTimePicker formatter={(date) => date.toLocaleString('en-US', { timeZone: 'America/New_York' })} />

Loading state

<DateTimePicker loading />

Replaces the clock icon with a spinner while loading is true.

Footer content

<DateTimePicker footer={<Button size="xs">Apply</Button>} />

Renders below the calendar/scroller, separated by a divider — useful for an explicit “Apply”/“Cancel” action pair instead of closing on every change.

Props

DateTimePicker extends TextInput props (minus value, onChange, defaultValue, which are redefined below with Date-based signatures).

TimePicker

A time-only picker (no calendar) — a text input with HH:mm:ss value, backed by the same scrollable hour/minute/second picker as DateTimePicker.

Import

import { TimePicker } from '@flxui/uikit/business'

Basic Usage

import { TimePicker } from '@flxui/uikit/business'
 
function Demo() {
  return <TimePicker onChange={(time) => console.log(time)} />
}

value/onChange/defaultValue are plain 'HH:mm:ss' strings, not Date objects:

import { useState } from 'react'
import { TimePicker } from '@flxui/uikit/business'
 
function Demo() {
  const [value, setValue] = useState('09:30:00')
  return <TimePicker value={value} onChange={setValue} />
}

Constraining the range

<TimePicker minTime="09:00:00" maxTime="18:00:00" />

minTime/maxTime come from the underlying TimeInput props and are also used to clamp the scroller picker’s selectable range.

Props

TimePicker extends TimeInput props (minus value, onChange, defaultValue), plus a subset of Popover props for dropdown behavior.

Plus any other TimeInput prop (e.g. minTime, maxTime) is forwarded directly.

useDateTimePicker

A helper hook for displaying and editing a DateTimePicker value in a specific timezone, independent of the browser’s local timezone. Converts the underlying UTC value to the target offset for display, and converts edits back before calling your onChange.

Import

import { useDateTimePicker } from '@flxui/uikit/business'

Usage

Spread the returned props directly into DateTimePicker:

import { DateTimePicker, useDateTimePicker } from '@flxui/uikit/business'
import { useState } from 'react'
 
function Demo() {
  const [value, setValue] = useState<Date>()
 
  const pickerProps = useDateTimePicker({
    value,
    onChange: setValue,
    utcOffset: -5 // e.g. America/New_York in standard time
  })
 
  return <DateTimePicker {...pickerProps} />
}

Internally, this converts value to the target offset for display (displayValue), and converts changes back to the picker’s native representation before calling your onChange — so the value you receive in onChange is a real Date reflecting the corrected time, not the raw local-timezone Date the picker would otherwise produce.

Parameters

Return value

Returns { value, onChange, startDate, endDate, formatter } — spread directly into DateTimePicker.