Date Picker

Selected

"2025-04-01T14:41:47.967Z"

ISO Date with time set

2025-04-01T14:41:47.967Z

Local date with time set

4/1/2025, 2:41:47 PM

Timezone

UTC 0 minutes in UTC


 
import { Container } from '@/components/container'
import type { DocumentedProperty } from '@/models/system'
import { DatePicker } from '@creation-ui/react'
import { useState, type FC } from 'react'
 
 
 
export const DatePickerExample = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(null)
 
  const handleDateChange = (date: any) => {
    setSelectedDate(date)
  }
 
  return (
    <Container variant='column'>
      <DatePicker value={selectedDate} onChange={handleDateChange} />
      <CurrentDate date={selectedDate} />
    </Container>
  )
}

Component API

Prop	Default	Description
`value`	—	`Date \| null \| undefined` Date selected in calendar
`onChange`	—	`(date: Date \| null \| undefined) => void` Callback function when date is selected

Rest of the props is the same as in Input props and controls the Input element.