Carregando…

Date Picker

Inputs

Calendar date picker with month/year nav, time support, min/max, clearable and range/time/inline-calendar modes.

UnificadosDate Range Picker Time Picker Calendar

Date Range Picker

Unificado

Time Picker

Unificado

Calendar

Unificado

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for inputs/calendar

Instalação via CLI

$ npx kikitocn add date-picker

Interno:

@/lib/utils

Exemplo de uso

Date PickerExample.tsx

import { DatePicker } from "@/components/ui/cn/date-picker/DatePicker";

export function DatePickerExample() {
  return (
    <DatePicker />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`range`	`boolean`	`false`	Ativa o seletor de intervalo com dois calendários (value = { start, end }; absorve DateRangePicker)
`showTime`	`boolean`	`false`	Adiciona seleção de hora/minuto ao calendário (modo single)
`mode`	`'input' \| 'inline'`	`'input'`	'input' (campo com popover, padrão) ou 'inline' (grade de calendário sempre aberta; absorve Calendar)
`events`	`CalendarEvent[]`	`[]`	Eventos { id, date, title, color? } marcados no modo 'inline'
`value`	`Date \| null`	`undefined`	Data selecionada (controlled). Com range=true, vira { start, end }
`defaultValue`	`Date \| null`	`null`	Data inicial (uncontrolled)
`onChange`	`(date: Date \| null) => void`	`undefined`	Callback quando a data muda
`placeholder`	`string`	`'Select date…'`	Texto placeholder
`label`	`string`	`undefined`	Label acima do campo
`helperText`	`string`	`undefined`	Texto de ajuda abaixo do campo
`errorText`	`string`	`undefined`	Texto de erro
`state`	`'default' \| 'error'`	`'default'`	Estado visual do campo
`disabled`	`boolean`	`false`	Desabilita o campo
`clearable`	`boolean`	`true`	Exibe botão para limpar a data
`showTime`	`boolean`	`false`	Adiciona seletor de hora/minuto
`minDate`	`Date`	`undefined`	Data mínima selecionável
`maxDate`	`Date`	`undefined`	Data máxima selecionável
`locale`	`string`	`'en-US'`	Locale para formatação da data exibida

Voltar para Inputs

Carregando…

Prop

Tipo

Padrão

Descrição

range

boolean

false

Ativa o seletor de intervalo com dois calendários (value = { start, end }; absorve DateRangePicker)

showTime

boolean

false

Adiciona seleção de hora/minuto ao calendário (modo single)

mode

'input' | 'inline'

'input'

'input' (campo com popover, padrão) ou 'inline' (grade de calendário sempre aberta; absorve Calendar)

events

CalendarEvent[]

[]

Eventos { id, date, title, color? } marcados no modo 'inline'

value

Date | null

undefined

Data selecionada (controlled). Com range=true, vira { start, end }

defaultValue

Date | null

null

Data inicial (uncontrolled)

onChange

(date: Date | null) => void

undefined

Callback quando a data muda

placeholder

string

'Select date…'

Texto placeholder

label

string

undefined

Label acima do campo

helperText

string

undefined

Texto de ajuda abaixo do campo

errorText

string

undefined

Texto de erro

state

'default' | 'error'

'default'

Estado visual do campo

disabled

boolean

false

Desabilita o campo

clearable

boolean

true

Exibe botão para limpar a data

showTime

boolean

false

Adiciona seletor de hora/minuto

minDate

Date

undefined

Data mínima selecionável

maxDate

Date

undefined

Data máxima selecionável

locale

string

'en-US'

Locale para formatação da data exibida