• Documentation
  • Components
  • Blocks
Getting Started
  • Introduction
  • Principles
  • Setup
  • Dark Mode
Design System
  • Theming Tokens
  • Color Tokens
  • Buttons
  • UI Utilities & Variants
General & Navigation
  • Button
  • Link
  • Breadcrumbs
  • Toggle
  • Toggle Group
  • Search Field
  • File trigger
Form Inputs
  • Input
  • Number Field
  • Input OTP
  • Input Date
  • Input Time
  • Select
  • Checkbox
  • Radio
  • Combobox
  • Multi Selectdraft
  • Switch
  • Tag Field
  • Slider
  • Tabs
Date & Time
  • Calendar
  • Range Calendar
  • Date Picker
  • Date Range Picker
Data Feedback
  • Table
  • Alert
  • Avatar
  • Badge
  • Callout
  • Card
  • Progress Bar
  • Loader
  • Progress Bar Circle
  • Skeleton
  • Aspect Ratio
  • Keyboard
  • Separator
  • Native Table
  • Tag Group
Drag & Drop
  • Drag And Drop
Overlays & Disclosure
  • Dialog
  • Modal
  • Sheet
  • Popover
  • Disclosure
  • Disclosure Group
  • Menu
Layout & Structure
  • Sidebar
  • Navbar
Visualizations
  • Chart
  • Area Chart
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Tracker
Typography
  • Heading
  • Icon
  • Text
  1. Components
  2. date-range-picker

Date Range Picker

Pick a start and end date from a popover calendar.

React Aria

Demo

Date Range
mm/dd/yyyy
–
mm/dd/yyyy
import { DateRangePicker } from "@/components/jk/date-range-picker";


export const RangePickerDemo = () => {
    return (
        <div className="max-w-2xs">
            <DateRangePicker label="Date Range" />
        </div>
    )
}

Installation

terminal
npx shadcn@latest add @jk-ui/daterange-picker
Edit this page
Prev
Table

Structured rows and columns with sorting or filtering.

Next
On this page
  1. Demo
  2. Installation

Community

  1. Contributing
  2. Edit this page
  3. Star On github
Published under MIT License
    DemoBlocksTemplatesClub
Copyright © jk-ui 2026. Designed By Johnkat MJ.