Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Date Picker with Range for Vue

A range button for the 6th through the 22nd of this month. The popover shows this month and the next month side by side.

UI library: Ark UI

The button shows a calendar icon and a range from the 6th through the 22nd of this month. The popover shows two months side by side.

Use a range for a stay or a report window. Separate days are a different picker, and a Calendar is enough when you only need to show the span. Ark UI in Vue does not format the two dates on the button.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Date Picker anatomy: content, prev trigger, next trigger, table cell, trigger, value

FAQ

Which props make it a range picker?

selectionMode="range" and numOfMonths={2} on DatePicker. The content renders the visible month and the next one in two tables, under one header with the previous and next arrows.

Where are the start and end stored?

In the value, a list of two dates: start, then end. It starts on the 6th and 22nd of the current month, and the calendar opens there.

How does the button format the range?

Each date with Intl.DateTimeFormat as a short month, two-digit day and year, joined with a hyphen. With only a start it prints that date, and with nothing, Pick a date range.

Does picking the end date close the picker?

Yes, a complete range closes it. Set closeOnSelect to false to keep it open, for example when you add presets beside the months.

How do I show one month?

Set numOfMonths to 1 and drop the second table. The selection still works across months with the arrows.

Can I limit the length of the range?

Use isDateUnavailable to block days too far from the start, or check the length in the value change handler and keep the old value when it's too long.

All 8 date picker examples