Range Calendar

Dates & Time · Guide 32 of 46

Open the live Range Calendar demo →

Purpose

Calendar that selects a start and end date.

Import

<script lang="ts">
	import { RangeCalendar } from 'bits-ui';
</script>

The registry names RangeCalendar as this guide’s namespace. Copy the exact root and part composition from the live demo rather than guessing part names.

Usage checklist

• Choose locale, calendar, time zone, and value representation deliberately.
• Validate disabled values, ranges, and segment boundaries.
• Test keyboard entry, calendar interaction, mobile layout, and serialization.

Secondary reference

After using the local example, consult the upstream Bits UI reference for exhaustive API details.

Continue

• Previous: Calendar
• Index: All component guides
• Next: Date Field