Best Vue.js Datepickers & Calendars 2021

Why create a custom Datepicker or yourself, if there are so many really great Vue.js components already?

We've collected our favourite calendars & datepickers based on whether they are well maintained, easy to use, look nice and provide a good UX. This list will grow over time, and it's in no particular order.

If you think I'm missing an essential entry on this list (or one of them is deprecated and I didn't notice!) - let me know via Twitter @MadeWithVueJS!

V-Calendar 2732

V-Calendar is a calendar component as well as a DatePicker. The calendar supports highlights and popovers, the DatePicker supports single dates, multiple dates and date range selections. 

It's very customizable and lets you easily disable certain date patterns like weekends or the first Monday of every month.

A+ for style and animation! Oh, and the documentation is awesome, too. We use(d) it in a lot of projects, including madewithvuejs.com itself!

V-Calendar Calendar Component
icon-eye-dark Created with Sketch. 35.462

Vue Cal 682

Vue Cal's motto is "no dependency, no bullshit", and that summarizes it pretty well. It does not only offer a flexible, feature-rich date picker, but full calendar views as well – so if you need both in your apps you should definitely check this out.

Vue Cal Date Picker & Calendar Component
icon-eye-dark Created with Sketch. 19.696

Vue Functional Calendar 331

We are also watching this component evolve, as it offers a lot of options to use it. It supports picking (multiple) dates, date ranges and times, as well as marking dates. UX-wise, it has nice functionalities that help users pick their desired dates quickly, and it also comes with a dark theme out of the box!

Vue Functional Calendar Calendar Component
icon-eye-dark Created with Sketch. 11.345

Vue Datetime 937

vue-datetime is a mobile friendly DateTime Picker that supports date- and datetime mode. You can configure disabled dates and it supports localisation. Simple & functional!

Vue Datetime Mobile-friendly Datetime Picker
icon-eye-dark Created with Sketch. 27.869

Vue Hotel DatePicker  668

This DatePicker is a great fit for booking platforms and goes one step further compared to the AirBnB DatePicker. It's a responsive component that displays the number of nights selected and has features for custom check-in/check-out rules, localisation, minimum/maximum nights selected and more.

It doesn't support single date selection, though and is crafted with a check-in / check-out-date use case in mind.

Vue Hotel Datepicker Date-Range Picker Component
icon-eye-dark Created with Sketch. 4.636

Vue CtkDateTimePicker 721

Date, Time and DateTime Selections, inline or as a popover. You can disable the selection of weekends, set an allowed date range (min and max dates displayed) and customize colors. The component also keeps improving for responsive views.

VueCtkDateTimePicker Date & Time Picker Component
icon-eye-dark Created with Sketch. 5.391
Similar Articles
Best Vue.js Notification Components
01.04.2021  •  in #UI Components
I've collected some of my favourite, versatile (and mostly lightweight) Vue.js Notification, Alert & Toast Components in this article!
Top Vue.js Chart Components
18.11.2020  •  in #UI Components
Choosing a chart component is not always an easy task. They have to fit your data, be beautiful, customizable, responsive, easy to implement.. 🤯 We have collected our favourite Vue.js chart components in this article!
COMMUNITY SPONSORS