Basic DatePicker

A simple date picker with calendar view.

Live Example

Code Breakdown

Basic Usage

import { DatePicker, toISODateString } from '@dreamstack-us/kaal';

const [selectedDate, setSelectedDate] = useState(new Date());

<DatePicker
  value={selectedDate}
  onChange={setSelectedDate}
  variant="calendar"
  weekStartsOn={0}
  themeOverrides={{
    primaryColor: '#3b82f6',
    backgroundColor: '#ffffff',
    textColor: '#1e293b',
  }}
/>

Week Start

Set which day starts the week using weekStartsOn:

// Sunday first (US default)
<DatePicker weekStartsOn={0} ... />

// Monday first (Europe)
<DatePicker weekStartsOn={1} ... />

Dark Theme Example

With Min/Max Date

Next Steps

• TimePicker iOS - iOS-style wheel time picker
• TimePicker Material - Material Design clock picker
• Theming - Customize the appearance