10 Best Date Picker Components For Vue.js (2022 Update)

Date pickers are a recurring feature within the majority of web applications, be it for users to schedule events, employees/clients to select anticipated dates for stays, appointments, or even for users to input data in relation to an update or action.

Most often, date pickers are associated with textboxes and drop-down boxes or calendars; and that is how they are implemented in most cases. However, there are many situations where additional customization and user experience enhancement can be desired, which means using a custom date picker component might be a better solution.

There are dozens of date picker components for Vue.js on the web but here I’ll be discussing the best ones based on popularity and features.

In this post, I’d like to share with you the 10 best Vue.js date picker components for booking, reservation, and any other event-based web & mobile applications. I’ve tested all these components personally and think they all make amazing additions to any Vue.js application.

Originally published Oct 01 2019, updated Feb 27 2022

1. vue-ctk-date-time-picker

vue-ctk-date-time-picker

Demo Download

A vue component for select dates (range mode available) & time.


2. 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.

3. 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.


4. vue-date-pick

Lightweight And Mobile Friendly Date Time Picker – vue-date-pick

Demo Download

Lightweight and mobile friendly date time picker based on Vue. Vue date pick emphasizes performance, elegant and usable UI on all screen sizes and simplicity of configuration. Has no dependencies on css frameworks or date libraries. Weighs less then 5KB.


5. Litepie

Lightweight And Mobile Friendly Date Time Picker – vue-date-pick

Demo Download

A date and date range picker Vue.js component build with Tailwind CSS and day.js.


6. Datetime & Date Range Picker For Vue 3

Datetime & Date Range Picker For Vue 3

Demo Download

A Vue. 3 component for creating date picker, time picker, and date range picker in your app.


7. Vue 2.x Datetime Picker Plugin

Vue 2.x Datetime Picker Plugin

Demo Download

A basic date and time picker plugin for Vue.js 2.x. Also supports inline calendar mode.


8. Persian Date & Time Picker For Vue.js

Persian Date & Time Picker For Vue.js

Demo Download

A Material Design persian date & time picker for Vue.js that enables your users to select jalali date and time from a calendar popup.


9. single-date-picker

Minimal Calendar Date Picker For Vue.js – single-date-picker

Demo Download

A really simple date picker component where the users can select a date from a minimal clean calendar view.


10. Vueye Datepicker

User-friendly Date Picker Component – Vueye Datepicker

Demo Download

A simple and user-friendly date picker component to select a date from year/month/date selection popups.


Conclusion:

We have picked the most popular and best Vue date picker components for you. Now you can pick any of them and implement Vue date picker in your project. You can also extend functionality or change styles for a better look.

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

See Also: