Best Vue.js Datepickers

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

We've collected our favourite 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!) - just leave a comment or send me an email (armin@nifty.at)!

Vue.js DatePicker  1326

If you want a simple and stable component, you can't go wrong with vuejs-datepicker. It supports the disabling and highlighting of dates, inline mode and translations.

vuejs-datepicker A simple Vue.js datepicker component
icon-eye-dark Created with Sketch. 215

Vue Datetime 262

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 for Vue.js
icon-eye-dark Created with Sketch. 4.037

V-Calendar 701

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.

V-Calendar A Vue.js plugin for simple, attributed calendars, with date picker support built-in.
icon-eye-dark Created with Sketch. 5.625

Vue AirBnB Style DatePicker  233

If you love the DatePicker on airbnb.com, this may be exactly your thing. It very easy to use and supports range- as well as single date selection. You can disable certain dates and do some custom configurations.

Vue AirBnB Style DatePicker A Vue.js DatePicker with a similar look & functionality as the popular AirBnB DatePicker
icon-eye-dark Created with Sketch. 210

Vue Hotel DatePicker  299

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 Vue Date-Range-Picker Component
icon-eye-dark Created with Sketch. 439

Vue CtkDateTimePicker 27

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 A Vue.js Date & Time Picker
icon-eye-dark Created with Sketch. 429
Similar Articles
Vue on 2018 — Interview with Evan You, author of the Vue.js framework [via Hackages]
10.04.2018  •  in #Bookmarks
Liesbeth Hermans published her great interview with Evan You, creator of Vue.js, on the . Read about how Evan ended up coding Vue.js, his career path and his biggest challenges! They also talked about the state & future of Vue.js 🙌 (There's also ,...
Our favourite Games made with Vue.js 👾
14.08.2018
There are a lot of really cute Vue.js game experiments around! Many of them helped their developers learn to understand Vue.js better. Here, I collect our favourite games #madewithvuejs!
Comments