Back to blocks
date-picker
Block
Date Picker Variants
8 date picker components including ranges, presets, and selectors
Installation
npx shadcn add @mylo-ui/date-picker-variantsPreview
8 Variants
Date Picker Collection
Beautiful date input components for every use case
Single Date Selection
Simple Date Picker
Basic single date selection
With Form Input
Integrated with form labels
Inline Calendar
Always-visible calendar widget
June 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Date Range Selection
Date Range
Select start and end dates
Quick Select with Presets
Common date ranges for rapid selection
Navigation & Selectors
Month Navigator
Quick month-to-month browsing
Year & Month
Direct year and month selection
Full Calendar View
Dual-Month Calendar
Two-month view for better date range visualization
June 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
July 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Usage
import { DatePickerVariants } from "@/components/blocks/date-picker-variants"
export default function Page() {
return <DatePickerVariants />
}Dependencies
lucide-react
date-fns
react-day-picker
shadcn/ui Components
calendar
popover
button
card
badge
input
label
select