useDateTime

Combined date and time picker hook that composes useCalendar and useTimePicker.

import { useDateTime } from '@gentleduck/calendar'

import { useDateTime } from '@gentleduck/calendar'

Usage

import { NativeAdapter, useDateTime } from '@gentleduck/calendar'
 
const adapter = new NativeAdapter()
 
function MyDateTimePicker() {
  const { calendar, timePicker, state } = useDateTime({
    adapter,
    defaultValue: new Date(),
    hourCycle: '12',
  })
 
  // calendar - full UseCalendar.IUseCalendarReturn (state, actions, prop getters)
  // timePicker - full UseTimePicker.IUseTimePickerReturn (state, actions, getFieldProps)
  // state.value - combined Date with both date and time
}

import { NativeAdapter, useDateTime } from '@gentleduck/calendar'
 
const adapter = new NativeAdapter()
 
function MyDateTimePicker() {
  const { calendar, timePicker, state } = useDateTime({
    adapter,
    defaultValue: new Date(),
    hourCycle: '12',
  })
 
  // calendar - full UseCalendar.IUseCalendarReturn (state, actions, prop getters)
  // timePicker - full UseTimePicker.IUseTimePickerReturn (state, actions, getFieldProps)
  // state.value - combined Date with both date and time
}

Config

UseDateTime.IConfig<TDate>

Prop	Type	Default	Description
`adapter`	`Adapter.IDateAdapter<TDate>`	required	Date adapter instance
`locale`	`Calendar.ICalendarLocaleConfig`	-	Locale and direction settings
`value`	`TDate`	-	Controlled datetime value
`defaultValue`	`TDate`	-	Default datetime (uncontrolled)
`onChange`	`(value: TDate) => void`	-	Called when date or time changes
`hourCycle`	`Time.IHourCycle`	`'24'`	`'12'` or `'24'` hour display
`showSeconds`	`boolean`	`false`	Show the seconds field
`month`	`TDate`	-	Controlled displayed month
`defaultMonth`	`TDate`	-	Default month (uncontrolled)
`onMonthChange`	`(month: TDate) => void`	-	Called when month changes
`disabled`	`TDate[] \| (date) => boolean`	-	Disabled dates
`fromDate`	`TDate`	-	Earliest selectable date
`toDate`	`TDate`	-	Latest selectable date
`onDismiss`	`() => void`	-	Called on `Escape`

Return value

UseDateTime.IReturn<TDate>

`calendar`

A full UseCalendar.IUseCalendarReturn<TDate, 'single'>. See useCalendar for details.

`timePicker`

A full UseTimePicker.IUseTimePickerReturn. See useTimePicker for details.

`state`

Property	Type	Description
`value`	`TDate \| null`	Combined date + time value

`actions`

Method	Signature	Description
`setValue`	`(value: TDate) => void`	Set the combined datetime