ComponentsDate Picker With Range

Date Picker With Range

An dual-month calendar range selection component designed for choosing date ranges in forms, reports, or scheduling tasks.

React

Range Selection

Interactive Demo

Toggle dates across the calendar grids to choose range bounds.

Select Date Range

Select the start and end dates for the official leave or project timeline.

Start Date2026-06-01

End Date2026-06-08

Installation

pnpm dlx shadcn@latest add https://micto-ui-kit.misangono.net/r/micto/date-picker-with-range.json

Usage

Import and bind control states using react-day-picker ranges.

import { useState } from "react"
import { DateRange } from "react-day-picker"
import { DatePickerWithRange } from "@/components/micto/date-picker-with-range"

export default function Page() {
  const [dateRange, setDateRange] = useState<DateRange | undefined>({
    from: new Date(),
    to: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
  })

  return (
    <DatePickerWithRange 
      value={dateRange} 
      onChange={setDateRange} 
    />
  )
}

API Reference

Configuration attributes available for the Date Picker With Range component.

Prop	Type	Default	Description
value	DateRange	undefined	The selected date range containing optional 'from' and 'to' Date objects.
onChange	(date: DateRange \| undefined) => void	undefined	Callback triggered when the date range selection changes.
className	string	undefined	Custom classes applied to the container wrapping the date range trigger button.

PreviousDate Picker NextDocumentViewer