DatePicker

Allow users to select a Date and Time value.

The DatePicker is currently in beta, we'd love to hear your feedback while we finalize the API.

Import#

  • DatePicker: The container component that manages state and context.
  • DatePickerTrigger: Wrapper that toggles the DatePickerDialog visibility.
  • DatePickerDialog: The date picker content.
  • DatePickerCalendar: Calender showing available months and days.
  • DatePickerTimeField: Time field to allow users enter a time.
import {
DatePicker,
DatePickerTrigger,
DatePickerDialog,
DatePickerCalendar,
DatePickerTimeField,
} from '@saas-ui/date-picker'

Usage#

The DatePicker uses @internationalized/date to represent and manipulate dates. Check out the documentation to learn how to work with Date objects.

Basic#

<DatePicker>
<DatePickerTrigger>
<Button>Open DatePicker</Button>
</DatePickerTrigger>
<DatePickerDialog>
<DatePickerCalendar />
</DatePickerDialog>
</DatePicker>

With time#

<DatePicker granularity="minute">
<DatePickerTrigger>
<Button>Open DatePicker</Button>
</DatePickerTrigger>
<DatePickerDialog>
<DatePickerCalendar />
<DatePickerTimeField />
</DatePickerDialog>
</DatePicker>

Locale#

<DatePicker granularity="minute" locale="nl-NL">
<DatePickerTrigger>
<Button>Open DatePicker</Button>
</DatePickerTrigger>
<DatePickerDialog>
<DatePickerCalendar />
<DatePickerTimeField />
</DatePickerDialog>
</DatePicker>

With 24 hour time#

<DatePicker hourCycle="24" granularity="minute">
<DatePickerTrigger>
<Button>Open DatePicker</Button>
</DatePickerTrigger>
<DatePickerDialog>
<DatePickerCalendar />
<DatePickerTimeField />
</DatePickerDialog>
</DatePicker>

Controlled#

function ControlledPicker() {
const [value, setValue] = React.useState(today(getLocalTimeZone()))
return (
<DatePicker value={value} onChange={setValue}>
<DatePickerTrigger>
<Button>{value.toString()}</Button>
</DatePickerTrigger>
<DatePickerDialog>
<DatePickerCalendar />
</DatePickerDialog>
</DatePicker>
)
}

Controlled with zoned time#

function ControlledPicker() {
const [value, setValue] = React.useState(now(getLocalTimeZone()))
return (
<DatePicker value={value} onChange={setValue} granularity="minute">
<DatePickerTrigger>
<Button>{value.toString()}</Button>
</DatePickerTrigger>
<DatePickerDialog>
<DatePickerCalendar />
<DatePickerTimeField />
</DatePickerDialog>
</DatePicker>
)
}

Props#

DatePicker Props#

defaultValue

Type
DateValue

locale

Type
string

maxValue

Type
DateValue

minValue

Type
DateValue

onChange

Type
((value: DateValue | null) => void)

timeZone

Type
string

value

Type
DateValue | null

DatePickerTrigger Props#

DatePickerDialog Props#

about

Type
string

accessKey

Type
string

autoCapitalize

Type
string

autoCorrect

Type
string

autoSave

Type
string

className

Type
string

contentEditable

Type
"inherit" | Booleanish

contextMenu

Type
string

dangerouslySetInnerHTML

Type
{ __html: string; }

datatype

Type
string

defaultChecked

Type
boolean

defaultValue

Type
string | number | readonly string[]

dir

Type
string

draggable

Type
Booleanish

hidden

Type
boolean

hideArrow

Type
boolean

id

Type
string

inlist

Type
any

inputMode

Type
"text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal"

is

Type
string

itemID

Type
string

itemProp

Type
string

itemRef

Type
string

itemScope

Type
boolean

itemType

Type
string

lang

Type
string

nonce

Type
string

onAbort

Type
ReactEventHandler<HTMLElement>

onAbortCapture

Type
ReactEventHandler<HTMLElement>

onAnimationEnd

Type
AnimationEventHandler<HTMLElement>

onAnimationEndCapture

Type
AnimationEventHandler<HTMLElement>

onAnimationIteration

Type
AnimationEventHandler<HTMLElement>

onAnimationIterationCapture

Type
AnimationEventHandler<HTMLElement>

onAnimationStartCapture

Type
AnimationEventHandler<HTMLElement>

onAuxClick

Type
MouseEventHandler<HTMLElement>

onAuxClickCapture

Type
MouseEventHandler<HTMLElement>

onBeforeInput

Type
FormEventHandler<HTMLElement>

onBeforeInputCapture

Type
FormEventHandler<HTMLElement>

onBlur

Type
FocusEventHandler<HTMLElement>

onBlurCapture

Type
FocusEventHandler<HTMLElement>

onCanPlay

Type
ReactEventHandler<HTMLElement>

onCanPlayCapture

Type
ReactEventHandler<HTMLElement>

onCanPlayThrough

Type
ReactEventHandler<HTMLElement>

onCanPlayThroughCapture

Type
ReactEventHandler<HTMLElement>

onChange

Type
FormEventHandler<HTMLElement>

onChangeCapture

Type
FormEventHandler<HTMLElement>

onClick

Type
MouseEventHandler<HTMLElement>

onClickCapture

Type
MouseEventHandler<HTMLElement>

onCompositionEnd

Type
CompositionEventHandler<HTMLElement>

onCompositionEndCapture

Type
CompositionEventHandler<HTMLElement>

onCompositionStart

Type
CompositionEventHandler<HTMLElement>

onCompositionStartCapture

Type
CompositionEventHandler<HTMLElement>

onCompositionUpdate

Type
CompositionEventHandler<HTMLElement>

onCompositionUpdateCapture

Type
CompositionEventHandler<HTMLElement>

onContextMenu

Type
MouseEventHandler<HTMLElement>

onContextMenuCapture

Type
MouseEventHandler<HTMLElement>

onCopy

Type
ClipboardEventHandler<HTMLElement>

onCopyCapture

Type
ClipboardEventHandler<HTMLElement>

onCut

Type
ClipboardEventHandler<HTMLElement>

onCutCapture

Type
ClipboardEventHandler<HTMLElement>

onDoubleClick

Type
MouseEventHandler<HTMLElement>

onDoubleClickCapture

Type
MouseEventHandler<HTMLElement>

onDragCapture

Type
DragEventHandler<HTMLElement>

onDragEndCapture

Type
DragEventHandler<HTMLElement>

onDragEnter

Type
DragEventHandler<HTMLElement>

onDragEnterCapture

Type
DragEventHandler<HTMLElement>

onDragExit

Type
DragEventHandler<HTMLElement>

onDragExitCapture

Type
DragEventHandler<HTMLElement>

onDragLeave

Type
DragEventHandler<HTMLElement>

onDragLeaveCapture

Type
DragEventHandler<HTMLElement>

onDragOver

Type
DragEventHandler<HTMLElement>

onDragOverCapture

Type
DragEventHandler<HTMLElement>

onDragStartCapture

Type
DragEventHandler<HTMLElement>

onDrop

Type
DragEventHandler<HTMLElement>

onDropCapture

Type
DragEventHandler<HTMLElement>

onDurationChange

Type
ReactEventHandler<HTMLElement>

onDurationChangeCapture

Type
ReactEventHandler<HTMLElement>

onEmptied

Type
ReactEventHandler<HTMLElement>

onEmptiedCapture

Type
ReactEventHandler<HTMLElement>

onEncrypted

Type
ReactEventHandler<HTMLElement>

onEncryptedCapture

Type
ReactEventHandler<HTMLElement>

onEnded

Type
ReactEventHandler<HTMLElement>

onEndedCapture

Type
ReactEventHandler<HTMLElement>

onError

Type
ReactEventHandler<HTMLElement>

onErrorCapture

Type
ReactEventHandler<HTMLElement>

onFocus

Type
FocusEventHandler<HTMLElement>

onFocusCapture

Type
FocusEventHandler<HTMLElement>

onGotPointerCapture

Type
PointerEventHandler<HTMLElement>

onGotPointerCaptureCapture

Type
PointerEventHandler<HTMLElement>

onInput

Type
FormEventHandler<HTMLElement>

onInputCapture

Type
FormEventHandler<HTMLElement>

onInvalid

Type
FormEventHandler<HTMLElement>

onInvalidCapture

Type
FormEventHandler<HTMLElement>

onKeyDown

Type
KeyboardEventHandler<HTMLElement>

onKeyDownCapture

Type
KeyboardEventHandler<HTMLElement>

onKeyPress

Type
KeyboardEventHandler<HTMLElement>

onKeyPressCapture

Type
KeyboardEventHandler<HTMLElement>

onKeyUp

Type
KeyboardEventHandler<HTMLElement>

onKeyUpCapture

Type
KeyboardEventHandler<HTMLElement>

onLoad

Type
ReactEventHandler<HTMLElement>

onLoadCapture

Type
ReactEventHandler<HTMLElement>

onLoadedData

Type
ReactEventHandler<HTMLElement>

onLoadedDataCapture

Type
ReactEventHandler<HTMLElement>

onLoadedMetadata

Type
ReactEventHandler<HTMLElement>

onLoadedMetadataCapture

Type
ReactEventHandler<HTMLElement>

onLoadStart

Type
ReactEventHandler<HTMLElement>

onLoadStartCapture

Type
ReactEventHandler<HTMLElement>

onLostPointerCapture

Type
PointerEventHandler<HTMLElement>

onLostPointerCaptureCapture

Type
PointerEventHandler<HTMLElement>

onMouseDown

Type
MouseEventHandler<HTMLElement>

onMouseDownCapture

Type
MouseEventHandler<HTMLElement>

onMouseEnter

Type
MouseEventHandler<HTMLElement>

onMouseLeave

Type
MouseEventHandler<HTMLElement>

onMouseMove

Type
MouseEventHandler<HTMLElement>

onMouseMoveCapture

Type
MouseEventHandler<HTMLElement>

onMouseOut

Type
MouseEventHandler<HTMLElement>

onMouseOutCapture

Type
MouseEventHandler<HTMLElement>

onMouseOver

Type
MouseEventHandler<HTMLElement>

onMouseOverCapture

Type
MouseEventHandler<HTMLElement>

onMouseUp

Type
MouseEventHandler<HTMLElement>

onMouseUpCapture

Type
MouseEventHandler<HTMLElement>

onPaste

Type
ClipboardEventHandler<HTMLElement>

onPasteCapture

Type
ClipboardEventHandler<HTMLElement>

onPause

Type
ReactEventHandler<HTMLElement>

onPauseCapture

Type
ReactEventHandler<HTMLElement>

onPlay

Type
ReactEventHandler<HTMLElement>

onPlayCapture

Type
ReactEventHandler<HTMLElement>

onPlaying

Type
ReactEventHandler<HTMLElement>

onPlayingCapture

Type
ReactEventHandler<HTMLElement>

onPointerCancel

Type
PointerEventHandler<HTMLElement>

onPointerCancelCapture

Type
PointerEventHandler<HTMLElement>

onPointerDown

Type
PointerEventHandler<HTMLElement>

onPointerDownCapture

Type
PointerEventHandler<HTMLElement>

onPointerEnter

Type
PointerEventHandler<HTMLElement>

onPointerEnterCapture

Type
PointerEventHandler<HTMLElement>

onPointerLeave

Type
PointerEventHandler<HTMLElement>

onPointerLeaveCapture

Type
PointerEventHandler<HTMLElement>

onPointerMove

Type
PointerEventHandler<HTMLElement>

onPointerMoveCapture

Type
PointerEventHandler<HTMLElement>

onPointerOut

Type
PointerEventHandler<HTMLElement>

onPointerOutCapture

Type
PointerEventHandler<HTMLElement>

onPointerOver

Type
PointerEventHandler<HTMLElement>

onPointerOverCapture

Type
PointerEventHandler<HTMLElement>

onPointerUp

Type
PointerEventHandler<HTMLElement>

onPointerUpCapture

Type
PointerEventHandler<HTMLElement>

onProgress

Type
ReactEventHandler<HTMLElement>

onProgressCapture

Type
ReactEventHandler<HTMLElement>

onRateChange

Type
ReactEventHandler<HTMLElement>

onRateChangeCapture

Type
ReactEventHandler<HTMLElement>

onReset

Type
FormEventHandler<HTMLElement>

onResetCapture

Type
FormEventHandler<HTMLElement>

onScroll

Type
UIEventHandler<HTMLElement>

onScrollCapture

Type
UIEventHandler<HTMLElement>

onSeeked

Type
ReactEventHandler<HTMLElement>

onSeekedCapture

Type
ReactEventHandler<HTMLElement>

onSeeking

Type
ReactEventHandler<HTMLElement>

onSeekingCapture

Type
ReactEventHandler<HTMLElement>

onSelect

Type
ReactEventHandler<HTMLElement>

onSelectCapture

Type
ReactEventHandler<HTMLElement>

onStalled

Type
ReactEventHandler<HTMLElement>

onStalledCapture

Type
ReactEventHandler<HTMLElement>

onSubmit

Type
FormEventHandler<HTMLElement>

onSubmitCapture

Type
FormEventHandler<HTMLElement>

onSuspend

Type
ReactEventHandler<HTMLElement>

onSuspendCapture

Type
ReactEventHandler<HTMLElement>

onTimeUpdate

Type
ReactEventHandler<HTMLElement>

onTimeUpdateCapture

Type
ReactEventHandler<HTMLElement>

onTouchCancel

Type
TouchEventHandler<HTMLElement>

onTouchCancelCapture

Type
TouchEventHandler<HTMLElement>

onTouchEnd

Type
TouchEventHandler<HTMLElement>

onTouchEndCapture

Type
TouchEventHandler<HTMLElement>

onTouchMove

Type
TouchEventHandler<HTMLElement>

onTouchMoveCapture

Type
TouchEventHandler<HTMLElement>

onTouchStart

Type
TouchEventHandler<HTMLElement>

onTouchStartCapture

Type
TouchEventHandler<HTMLElement>

onTransitionEnd

Type
TransitionEventHandler<HTMLElement>

onTransitionEndCapture

Type
TransitionEventHandler<HTMLElement>

onVolumeChange

Type
ReactEventHandler<HTMLElement>

onVolumeChangeCapture

Type
ReactEventHandler<HTMLElement>

onWaiting

Type
ReactEventHandler<HTMLElement>

onWaitingCapture

Type
ReactEventHandler<HTMLElement>

onWheel

Type
WheelEventHandler<HTMLElement>

onWheelCapture

Type
WheelEventHandler<HTMLElement>

placeholder

Type
string

prefix

Type
string

property

Type
string

radioGroup

Type
string

resource

Type
string

results

Type
number

role

Type
AriaRole

security

Type
string

slot

Type
string

spellCheck

Type
Booleanish

suppressContentEditableWarning

Type
boolean

suppressHydrationWarning

Type
boolean

tabIndex

Type
number

title

Type
string

translate

Type
"yes" | "no"

typeof

Type
string

unselectable

Type
"on" | "off"

variants

Type
Partial<Record<"exit" | "enter", Variant>>

vocab

Type
string

DatePickerCalendar Props#

DatePickerTimeField Props#

Was this helpful?