DateTimePicker

Capture datetime from the user.

Import

import { DateTimePicker } from '@tidbcloud/uikit'

Usage

import { DateTimePicker } from '@tidbcloud/uikit'
 
function Demo() {
  return <DateTimePicker label="Pick date and time" placeholder="Pick date and time" />
}

With seconds

Set withSeconds prop to display seconds input:

import { DateTimePicker } from '@tidbcloud/uikit'
 
function Demo() {
  return <DateTimePicker withSeconds label="Pick date and time" placeholder="Pick date and time" />
}

Value format

Use valueFormat prop to change dayjs format of value label:

import { DateTimePicker } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <DateTimePicker valueFormat="DD MMM YYYY hh:mm A" label="Pick date and time" placeholder="Pick date and time" />
  )
}

Clearable

Set clearable prop to display clear button:

import { DateTimePicker } from '@tidbcloud/uikit'
 
function Demo() {
  return <DateTimePicker clearable label="Pick date and time" placeholder="Pick date and time" />
}

Set dropdownType="modal" to render picker in a modal:

import { DateTimePicker } from '@tidbcloud/uikit'
 
function Demo() {
  return <DateTimePicker dropdownType="modal" label="Pick date and time" placeholder="Pick date and time" />
}

TimePicker props

You can pass props to the underlying TimePicker component with timePickerProps:

import { DateTimePicker } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <DateTimePicker
      label="Pick date and time"
      placeholder="Pick date and time"
      timePickerProps={{
        withDropdown: true,
        format: '12h'
      }}
    />
  )
}

Disabled state

import { DateTimePicker } from '@tidbcloud/uikit'
 
function Demo() {
  return <DateTimePicker label="Disabled" placeholder="Pick date and time" disabled />
}

Props

Prop	Type	Default	Description
value	string \| null	-	Controlled value
defaultValue	string	-	Default value
onChange	(value: string \| null) => void	-	Called when value changes
valueFormat	string	-	dayjs format for display
withSeconds	boolean	false	Display seconds input
clearable	boolean	false	Show clear button
dropdownType	’popover’ \| ‘modal'	'popover’	Type of dropdown
timePickerProps	TimePickerProps	-	Props for TimePicker
minDate	string	-	Minimum allowed date
maxDate	string	-	Maximum allowed date
label	ReactNode	-	Input label
description	ReactNode	-	Input description
error	ReactNode	-	Error message
disabled	boolean	false	Disable input
placeholder	string	-	Input placeholder
size	MantineSize	’sm’	Input size
locale	string	’en’	dayjs locale

Datepickerinput Datesprovider