vue-date-tools
VueJS Date Components based on the date-fns library
Click Here to Try the Live Demo
Best features:
Lightweight and almost no dependencies
No dependencies other than the lightweight date-fns library! All other VueJS compatible datepickers I could find until now used JQuery, Bootstrap, and Moment JS. Vue Date Tools is the best starting point for performance in Date components.
Subcomponents are exposed for maximum flexibility
Mix and match sub-components such as the RangeSelector or the NumberIncrement to create your own VueJS datepicker that matches your specific requirements!
Easy to customize and style
VueJS date component libraries that present themselves as "plug and play" are in my experience quite difficult to style and customize for a specific project. You can use the provided Example Date Components as is, but Vue Date Tools is more intended as a toolbox for date components where the hard parts have already been solved.
Bi-directional components for better user experience
Users also have the option to directly edit the date in the input to update the state.
Uses Javascript Native Date object under the hood.
Example Components:
VueJS DatePicker with Date and Time selection
VueJS DatePicker with Navigation arrows
DateRange Picker to select a duration
DateRange Picker with a list of prepared duration suggestions
Simple TimePicker to select a time
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
