DatePicker

Custom calendar popover matching CRM DateSelect.

When to use

Use DatePicker when you need custom calendar popover matching crm dateselect.

Import

TypeScript

import { DatePicker } from '@gzodo/ui'

DatePicker is a control-surface trigger with a positioned calendar. The value is { startDate, endDate } as ISO strings. The date field is split into segments from format (DD, MM, YYYY, YY). Use range for two calendars and showTime for hour steps. Month, year, and time pickers reuse Select.

Examples

Basic

Controlled value.startDate. Choosing a day updates the ISO string and keeps the time part.

Format

Segments follow format. YYYY-MM-DD starts on the year. Type a digit, arrows change the focused segment, and a finished segment moves to the next one.

Range

Two calendars side by side. Days between start and end use the range tone.

With time

showTime adds a time Select. timeStep defaults to 15 minutes.

Outline and size

Variant and size match the other controls.

Disabled

A disabled trigger does not open the calendar.

DatePicker

Property

Description

Type

Default

value

{ startDate, endDate } ISO strings. Use empty string for unset.

DatePickerValue

—

onChange

Next start/end ISO values.

(value: DatePickerValue) => void

—

range

Show start and end calendars.

boolean

false

showTime

Show a time Select next to the date input.

boolean

false

timeStep

Minutes between time options.

number | string

15

format

Segment pattern. Tokens DD, MM, YYYY, and YY render as editable sections; other characters stay as separators.

string

'DD.MM.YYYY'

isOpen

Controlled open state.

boolean

—

onOpenChange

Called when the popover opens or closes.

(open: boolean) => void

—

isPortal

Portal the calendar to document.body so it paints above clipped parents.

boolean

true

variant

Control surface variant.

ControlVariant

'default'

size

Control height.

'sm' | 'md' | 'lg' | 'xl'

'md'

disabled

Blocks opening the calendar.

boolean

—

fullWidth

Stretch the trigger.

boolean

—

Select

Checkbox