Vue Date Range Picker screenshot

Vue Date Range Picker

Author Avatar Theme by Owumaro
Updated: 24 Mar 2019
27 Stars

A vue component using Bootstrap 4 styles for date range selection

Categories

Overview

The vue-date-range-picker is a sleek, functional Vue component designed for selecting date ranges with the stylish flair of Bootstrap 4. Perfect for developers wanting a robust solution without heavy integration, this component provides flexibility and ease of use for any project requiring date range selection. Whether for analytics or planning, it effortlessly simplifies the picking of date ranges.

With its neatly implemented features and ability to function independently, this picker stands out. It is particularly appealing for developers looking to leverage the aesthetic of Bootstrap 4 while also needing to work flexibly with their favorite Vue components or JavaScript libraries.

Features

  • Date Range Selection: Allows users to select a start and end date swiftly, accommodating various project needs.
  • Compare Feature: Lets users choose a second date range, making comparisons straightforward and insightful.
  • DIY Integration: Designed for easy integration with your favorite Vue components or JavaScript libraries without any built-in constraints.
  • Bootstrap 4 Styles: Aesthetically pleasing, this component requires Bootstrap 4 CSS for a modern look and feel.
  • Moment.js Compatibility: Returns Moment.js instances, making date handling and manipulation seamless (requires moment.js).
  • Event Triggers: Utilizes events instead of v-model, providing more control with submit and cancel operations to manage date values effectively.
  • Customizable Properties: Offers various props, such as calendar-count for displaying multiple calendars and allow-compare to easily enable or disable the comparison feature.
  • Predefined Ranges: Comes with built-in predefined ranges that enhance user experience by providing instant options in the select menu.