DatePicker
Allow users to select a Date and Time value.
- Beta
Source
Theme source
@saas-ui/date-picker
- 2.8.9 (latest)
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.
In case you run into build issue with Next.js add the following line to next.config.js
.
transpilePackages: ['@saas-ui/date-picker'],
Basic
import { Flex, Button } from '@chakra-ui/react'import {DatePicker,DatePickerTrigger,DatePickerDialog,DatePickerCalendar,} from '@saas-ui/date-picker'export default function Page() {return (<Flex justifyContent="center"><DatePicker defaultIsOpen><DatePickerTrigger><Button>Open DatePicker</Button></DatePickerTrigger><DatePickerDialog><DatePickerCalendar /></DatePickerDialog></DatePicker></Flex>)}
With time
import { Flex, Button } from '@chakra-ui/react'import {DatePicker,DatePickerTrigger,DatePickerDialog,DatePickerCalendar,DatePickerTimeField,} from '@saas-ui/date-picker'export default function Page() {return (<Flex justifyContent="center"><DatePicker defaultIsOpen closeOnBlur={false}><DatePickerTrigger><Button>Open DatePicker</Button></DatePickerTrigger><DatePickerDialog><DatePickerCalendar /><DatePickerTimeField /></DatePickerDialog></DatePicker></Flex>)}
Locale
import { Flex, Button } from '@chakra-ui/react'import {DatePicker,DatePickerTrigger,DatePickerDialog,DatePickerCalendar,DatePickerTimeField,} from '@saas-ui/date-picker'export default function Page() {return (<Flex justifyContent="center"><DatePickerdefaultIsOpencloseOnBlur={false}granularity="minute"locale="nl-NL"><DatePickerTrigger><Button>Open DatePicker</Button></DatePickerTrigger><DatePickerDialog><DatePickerCalendar /><DatePickerTimeField /></DatePickerDialog></DatePicker></Flex>)}
With 24 hour time
import { Flex, Button } from '@chakra-ui/react'import {DatePicker,DatePickerTrigger,DatePickerDialog,DatePickerCalendar,DatePickerTimeField,} from '@saas-ui/date-picker'export default function Page() {return (<Flex justifyContent="center"><DatePickerdefaultIsOpencloseOnBlur={false}hourCycle="24"granularity="minute"><DatePickerTrigger><Button>Open DatePicker</Button></DatePickerTrigger><DatePickerDialog><DatePickerCalendar /><DatePickerTimeField /></DatePickerDialog></DatePicker></Flex>)}
Controlled
import { Flex, Button } from '@chakra-ui/react'import {DatePicker,DatePickerTrigger,DatePickerDialog,DatePickerCalendar,} from '@saas-ui/date-picker'import { today, now, getLocalTimeZone } from '@internationalized/date'export default function ControlledPicker() {const [value, setValue] = React.useState(today(getLocalTimeZone()))return (<Flex justifyContent="center"><DatePickerdefaultIsOpencloseOnBlur={false}value={value}onChange={setValue}><DatePickerTrigger><Button>{value.toString()}</Button></DatePickerTrigger><DatePickerDialog><DatePickerCalendar /></DatePickerDialog></DatePicker></Flex>)}
Controlled with zoned time
import { Flex, Button } from '@chakra-ui/react'import {DatePicker,DatePickerTrigger,DatePickerDialog,DatePickerCalendar,} from '@saas-ui/date-picker'import { today, now, getLocalTimeZone } from '@internationalized/date'export default function ControlledPicker() {const [value, setValue] = React.useState(now(getLocalTimeZone()))return (<Flex justifyContent="center"><DatePickerdefaultIsOpencloseOnBlur={false}value={value}onChange={setValue}granularity="minute"><DatePickerTrigger><Button>{value.toString()}</Button></DatePickerTrigger><DatePickerDialog><DatePickerCalendar /><DatePickerTimeField /></DatePickerDialog></DatePicker></Flex>)}
Was this helpful?