Skip to main content

​
Overview

The @kuzenbo/date package provides comprehensive date and time components powered by date-fns. Build calendars, date pickers, time pickers, and more with full timezone support and internationalization.
This package is currently in preview and not yet published to npm. The API may change before the stable release.

​
Installation

Once published, install with: 
npm install @kuzenbo/date @kuzenbo/core @kuzenbo/theme react react-dom

​
Components

Calendar

Full-featured calendar with month/year navigation

DatePicker

Date selection with dropdown calendar

DatePickerInput

Text input with date picker overlay

DateTimePicker

Combined date and time selection

DateInput

Controlled date text input

TimePicker

Time selection component

TimeInput

Text input for time values

MonthPicker

Month selection component

YearPicker

Year selection component

MiniCalendar

Compact calendar display

​
Hooks

useDatesState

Manage date selection state

useDatesInput

Handle date input interactions

useUncontrolledDates

Uncontrolled date state management

useDatesContext

Access date provider context

​
Basic Usage

​
Date Picker

import { DatePicker } from '@kuzenbo/date';
import { useState } from 'react';

export function DatePickerDemo() {
  const [date, setDate] = useState<Date | null>(null);

  return (
    <DatePicker
      value={date}
      onChange={setDate}
      placeholder="Select a date"
    />
  );
}

​
Date Range Picker

import { DatePickerInput } from '@kuzenbo/date';
import { useState } from 'react';

export function DateRangePicker() {
  const [range, setRange] = useState<[Date | null, Date | null]>([null, null]);

  return (
    <DatePickerInput
      selectionMode="range"
      value={range}
      onChange={setRange}
      placeholder="Select date range"
    />
  );
}

​
Calendar

import { Calendar } from '@kuzenbo/date';
import { useState } from 'react';

export function CalendarDemo() {
  const [selected, setSelected] = useState<Date>(new Date());

  return (
    <Calendar
      value={selected}
      onChange={setSelected}
      firstDayOfWeek={1} // Monday
    />
  );
}

​
Date Time Picker

import { DateTimePicker } from '@kuzenbo/date';
import { useState } from 'react';

export function DateTimeDemo() {
  const [dateTime, setDateTime] = useState<Date>(new Date());

  return (
    <DateTimePicker
      value={dateTime}
      onChange={setDateTime}
      withTime
    />
  );
}

​
Time Picker

import { TimePicker } from '@kuzenbo/date';
import { useState } from 'react';

export function TimePickerDemo() {
  const [time, setTime] = useState<string>('12:00');

  return (
    <TimePicker
      value={time}
      onChange={setTime}
      format="24h"
    />
  );
}

​
Selection Modes

Support for different date selection patterns: 
import { DatePicker } from '@kuzenbo/date';

// Single date
<DatePicker selectionMode="single" />

// Multiple dates
<DatePicker selectionMode="multiple" />

// Date range
<DatePicker selectionMode="range" />

​
Date Formatting

Custom date display formats: 
import { DatePickerInput } from '@kuzenbo/date';

<DatePickerInput
  value={date}
  onChange={setDate}
  format="MM/dd/yyyy"
  valueFormatter={(date) => format(date, 'PPP')}
/>

​
Locale Support

Internationalization with date-fns locales: 
import { DatesProvider } from '@kuzenbo/date';
import { es } from 'date-fns/locale';

export function App({ children }) {
  return (
    <DatesProvider locale={es}>
      {children}
    </DatesProvider>
  );
}

​
Timezone Support

Handle timezones with date-fns-tz: 
import { DateTimePicker } from '@kuzenbo/date';
import { formatInTimeZone } from '@date-fns/tz';

export function TimezonePicker() {
  return (
    <DateTimePicker
      withTime
      timezone="America/New_York"
      valueFormatter={(date) =>
        formatInTimeZone(date, 'America/New_York', 'PPpp zzz')
      }
    />
  );
}

​
Date Constraints

Restrict selectable dates: 
import { DatePicker } from '@kuzenbo/date';
import { addDays, subDays } from 'date-fns';

const today = new Date();

<DatePicker
  minDate={subDays(today, 30)}
  maxDate={addDays(today, 30)}
  excludeDate={(date) => date.getDay() === 0 || date.getDay() === 6}
/>

​
Custom Date Adapter

Use a custom date library: 
import { createDateAdapter } from '@kuzenbo/date';
import { format, parse } from 'date-fns';

const customAdapter = createDateAdapter({
  parse: (value, formatStr) => parse(value, formatStr, new Date()),
  format: (date, formatStr) => format(date, formatStr),
  // ... other adapter methods
});

<DatesProvider adapter={customAdapter}>
  {children}
</DatesProvider>

​
Dependencies

  • date-fns - Date manipulation library
  • @date-fns/tz - Timezone support
  • @date-fns/utc - UTC utilities
  • @kuzenbo/core - Core components
  • @hugeicons/react - Icons
  • tailwind-variants - Styling

​
Peer Dependencies

{
  "@kuzenbo/core": "^0.0.7",
  "@kuzenbo/theme": "^0.0.7",
  "react": "^19.0.0",
  "react-dom": "^19.0.0"
}

​
TypeScript

Fully typed date components: 
import { DatePicker } from '@kuzenbo/date';
import type { DatePickerProps, DateValue } from '@kuzenbo/date';

const MyDatePicker: React.FC<{ onChange: (date: DateValue) => void }> = ({
  onChange,
}) => {
  return <DatePicker onChange={onChange} />;
};

​
Next Steps

Core Components

Explore other UI components

Build docs developers (and LLMs) love

Get started for freeTalk to us