Source code
Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
npx ui-thing@latest add datepicker
You can optionally configure the vcalendar module in your nuxt.config.js file:
vcalendar: {
calendarOptions: {
masks: {
weekdays: "WW",
},
},
},
Usage
Datetime Mode
Custom Title
Button Slot
Input Slot
Responsive Layout
One a mobile screen, the Datepicker will expand to full width and display only one column. On larger screens, it will display two columns.
Time Rules
Limit the time selection by setting Time Rules on the Datepicker.
Here the user can set an appointment between 9 AM and 5 PM, with a 30-minute interval. Weekends are disabled.
Select your appointment date & time
Selected: Jul 27, 2025 at 2:16PM