Skip Navigation
docs
next page
date range picker

Date Range Picker

DateRangePicker is a provides a dropdown interface to allow users to select or enter a range of dates and includes additional options such as preset date ranges and an optional date comparison feature.

date-range-pickerdemo

DateRangePicker is a reusable component built for Shadcn using beautifully designed components from Radix UI and Tailwind CSS. It provides a dropdown interface to allow users to select or enter a range of dates and includes additional options such as preset date ranges and an optional date comparison feature.

Installation

The DateRangePicker depends on the following components from shadcn:

Run the following command 

pnpm dlx @shadext/cli add date-input

pnpm dlx @shadext/cli add date-range-picker

API Reference

Props

The editor accepts all standard Tiptap editor props, plus these additional configuration options:

valueOption[][]
onUpdate
function
initialDateFrom
Date or string
initialDateTo
Date or string
initialCompareFrom
Date or string
initialCompareTo
Date or string
align
string
'start'| 'end' | 'center'
locale
string
'en-US'
showCompare
boolean
'true'