Calendar

A date field component that allows users to enter and edit date.

Component Source Primitive API Reference UI Reference

About

The <Calendar /> component is built on top of the RadixVue Calendar component, which uses the @internationalized/date package to handle dates.

If you're looking for a range calendar, check out the Range Calendar component.

Installation

php artisan ui:add calendar

TIP

The component depends on the @internationalized/date package, which solves a lot of the problems that come with working with dates and times in JavaScript. Check Dates & Times in Radix Vue for more information and installation instructions.

Datepicker

You can use the <Calendar /> component to build a date picker. See the Date Picker page for more information.

Examples

Form

Advanced Customization

Month & Year Selects