10 Best Date Picker Components For Vue.js

A date picker is a commonly used UI component that allows the visitor to quickly select dates, times, date ranges in an easy way.

In this post I’d like to share with you the 10 best Vue.js date picker component for booking, reservation, and any other event-based web & mobile applications.

1. vuejs-datepicker


Demo Download

A full-featured and pretty clean date picker & date picker for both Vue.js 2.x and Vue 1.x.

More features:

  • Custom date format.
  • With max/minimum date ranges.
  • Date highlighting.
  • Bootstrap compatible.

2. vue-datetime


Demo Download

A mobile-friendly date & time picker for Vue.js apps.

More features:

  • 3 modes: date, time, datetime
  • custom datetime format
  • min/max date time
  • i18n

3. Vue Hotel Datepicker

Vue Hotel Datepicker

Demo Download

A responsive date range picker created for hotel apps.

Key features:

  • Custom date format
  • Custom start/end dates
  • Min/max nights
  • Allows to specify the disabled dates
  • i18n
  • And lots of configs & API methods.

4. vue2-datepicker


Demo Download

A Vue.js 2+ date/time/year/month/date range picker with user predefined date ranges.

5. Airbnb Datepicker

Airbnb Datepicker

Demo Download

A minimal clean date and date range picker inspired by Airbnb.

6. CtkDatetimePicker


Demo Download

A lightweight, feature-rich date picker component to select dates, times, and even date ranges in an easy way.

7. Persian Datetime Picker

Persian Datetime Picker

Demo Download

This is a themeable, highly customizable, Material Design styled date & time picker component created for RTL users who’d like to select Jalali date and time.

8. vue-rangedate-picker


Demo Download

A beautiful and configurable date picker plugin designed for range selection.

More features:

  • i18n
  • Allows you to specify start month/year.
  • Custom date format.
  • Allows you to reset date ranges.
  • Compact mode.

9. vue-date


Demo Download

A minimal date & date picker component to meet your date selection need.

10. Vue Datepicker UI

Vue Datepicker UI

Demo Download

A date picker UI component for Vue.js.


  • Custom translations.
  • Date range selection.
  • Custom first day of the week.
  • Custom position.
  • Disabled start/end dates.
  • Text/date formats.


Looking for more date, time, date range picker component for your applications? Check out our Vue.js Date Picker section for more components.

You Might Be Interested In: