Vue Date Range Helper

Introduction

VueJS (2) Component with two inputs (type date) with extra helper buttons to range dates

Features

• Pre-selected dates
• Uses user locale
• Custom CSS
• Events
• Default styles with Bootstrap 4

Installing

Install with npm:

npm install --save vue-date-range-helper

Import globally in app:

import VueDateRangeHelperPlugin from 'vue-date-range-helper';

Vue.use(VueDateRangeHelperPlugin);

Import into your component

import { VueDateRangeHelper } from 'vue-date-range-helper';

// add to component
components: {
  VueDateRangeHelper
}

Use in your project

<v-date-range-helper
    :end-date="new Date()"
    :start-date="new Date()"
    custom-css-classes="myCustomCss"
    button-css-classes="btn btn-sm btn-ghost-info"
    input-css-classes="form-control form-control-sm"
    from-label="From"
    to-label="To"
    month-label="Month"
    year-label="Year"
    input-locale="fr"
    @end-date-changed="updateYourEndDate"
    @start-date-changed="updateYourStartDate"
></v-date-range-helper>

Main Technologies

• moment.js
• Bootstrap 4