v0.0.2 is now available

The date & time picker for the
modern web

A production-ready, zero-dependency date and time picker built exclusively for React 18 & 19. Single date, range, presets, time columns, and pure keyboard navigation.

Get Started Live Playground

npm i react-datekit

Zero Dependencies

0 external runtime date arithmetic packages. Built purely on native JavaScript Date and cached Intl instances.

Unified Component API

Single, range, multiple, month, and year selection handled effortlessly via one clean <DatePicker /> component.

Time Picker Columns

Integrated scrollable 12h/24h time picker with optional seconds (:ss) selector and customizable minute stepping.

Quick-Select Presets

15+ built-in presets (today, last 7 days, this month) or supply custom date generators with docking placements.

Full WAI-ARIA & Keyboard

Grid navigation with Arrow keys, PageUp/PageDown month leaping, Home/End, and screen-reader announcements.

Design Tokens & Theming

Styled completely with pure CSS variables. Instant light/dark support, responsive sheets on mobile, and smooth transitions.

App.tsx

import { DatePicker } from "react-datekit";
import "react-datekit/style.css";
import { useState } from "react";

export default function App() {
  const [range, setRange] = useState({ start: null, end: null });

  return (
    <DatePicker
      mode="range"
      value={range}
      onChange={setRange}
      presets={['today', 'last7Days', 'thisMonth']}
      numberOfMonths={2}
    />
  );
}