Vue date range picker light

# Vue date range picker light

Vue2 date range picker based on https://github.com/dangrossman/bootstrap-daterangepicker with date-fns (no jQuery)

Date range picker component for vue made without jQuery dependency. Heavily inspired by bootstrap-daterangepicker.

# Installation

npm i vue-daterange-picker-light --save

or

yarn add vue-daterange-picker-light

import to use:

import DateRangePicker from 'vue-daterange-picker-light'

# Usage

Register the component

import DateRangePicker from 'vue-daterange-picker-light'
//you need to import the CSS manually (in case you want to override it)
import 'vue-daterange-picker-light/dist/vue-daterange-picker-light.css'
import { eo } from 'date-fns/locale' // import your locale

export default {
    components: { DateRangePicker },
}

    <date-range-picker
            ref="picker"
            :opens="opens"
            :locale-data="{ locale: eo, format: 'dd-MM-yyyy HH:mm:ss' }"
            :minDate="minDate" :maxDate="maxDate"
            :singleDatePicker="singleDatePicker"
            :timePicker="timePicker"
            :timePicker24Hour="timePicker24Hour"
            :showWeekNumbers="showWeekNumbers"
            :showDropdowns="showDropdowns"
            :autoApply="autoApply"
            v-model="dateRange"
            @update="updateValues"
            @toggle="checkOpen"
            :linkedCalendars="linkedCalendars"
            :dateFormat="dateFormat"
    >
        <template v-slot:input="picker" style="min-width: 350px;">
            {{ picker.startDate | date }} - {{ picker.endDate | date }}
        </template>
    </date-range-picker>

# Example / playground

September 10, 2017 - September 20, 2017
Whether the picker appears aligned to the left, to the right, or centered relative to the HTML element it's attached to
Show the ISO weeknumbers on the side of the calendar
Allow the user to select time.
The time selection uses the 24 hour format
Show dropdown/input for faster selection of year and month.
Automatically select the range once the second date is selected ( otherwise you need to click the apply button)
You can set this to false in order to hide the ranges selection. Otherwise it is an object with key/value.
Each calendar has separate navigation
Override date formatting :
dateFormat: function(classes, date) - special prop type function which accepts 2 params:
  • "classes" - the classes that the component's logic has defined,
  • "date" - tha date currently processed.

@return: you should return Vue class object which should be applied to the date rendered.

in the demo this function is used to disable "yesterday" date

# Props

Name Type Default Description
min-date String, Date null minimum date allowed to be selected
max-date String, Date null maximum date allowed to be selected
show-week-numbers Boolean false Show the week numbers on the left side of the calendar
linked-calendars Boolean true Each calendar has separate navigation when this is false
single-date-picker Boolean false Allows you to select only one date (instead of range). This will hide the ranges with different start/end
show-dropdowns Boolean false Show the dropdowns for month and year selection above the calendars
time-picker Boolean false Show the dropdowns for time (hour/minute) selection below the calendars
time-picker-increment Number 5 Determines the increment of minutes in the minute dropdown
time-picker24-hour Boolean true Use 24h format for the time
time-picker-seconds Boolean false Allows you to select seconds except hour/minute
auto-apply Boolean false Auto apply selected range. If false you need to click an apply button
locale-data Object *see below Object containing locale data used by the picker. See example below the table
date-range undefined null This is the v-model prop which the component uses.
ranges Object, Boolean *see below You can set this to false in order to hide the ranges selection. Otherwise it is an object with key/value. See below
opens String center which way the picker opens - "center", "left" or "right"
date-format Function function(classes, date) - special prop type function which accepts 2 params: "classes" - the classes that the component's logic has defined, "date" - tha date currently processed. You should return Vue class object which should be applied to the date rendered.
always-show-calendars Boolean true *WIP*
  • sample locale data (all values are optional)
import { eo } from 'date-fns/locale' // import your locale

{
    locale: eo, // setting the locale is recommended
    direction: 'ltr',
    format: 'P', // P is default long format for locales
    separator: ' - ',
    applyLabel: 'Apply',
    cancelLabel: 'Cancel',
    weekLabel: 'W',
    customRangeLabel: 'Custom Range',
    daysOfWeek: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], // will be obtained from locale if ommitted
    monthNames: [
        "Jan", "Feb", "Mar", "Apr", "May", "Jun",
        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ], // will be obtained from locale if ommitted
    firstDay: 1 // will be obtained from locale if ommitted
}
  • default ranges object (set to false to hide ranges)
{
    'Today': [new Date(), new Date()],
    'Yesterday': [addDays(new Date(), -1), addDays(new Date(), -1)],
    'This month': [startOfMonth(new Date()), endOfMonth(new Date())],
    'This year': [startOfYear(new Date()), endOfYear(new Date())],
    'Last week': [startOfWeek(addWeeks(new Date(), -1)), endOfWeek(addWeeks(new Date(), -1))],
    'Last month': [startOfMonth(addMonths(new Date(), -1)), endOfMonth(addMonths(new Date(), -1))]
}

# Events

Event Params Description
toggle
  • (boolean) open - the current state of the picker
  • (Function) togglePicker - function (show, event) which can be used to control the picker. where "show" is the new state and "event" is boolean indicating whether a new event should be raised
 Emits whenever the picker opens/closes
update
  • (json) value - json object containing the dates: {startDate, endDate}
 Emits when the user selects a range from the picker and clicks "apply" (if autoApply is true).

# Slots

input

Allows you to change the input which is visible before the picker opens @param {Date} startDate - current startDate @param {Date} endDate - current endDate @param {object} ranges - object with ranges

ranges

Allows you to change the range @param {Date} startDate - current startDate @param {Date} endDate - current endDate @param {object} ranges - object with ranges

# Miscellaneous

If you want to control the list of years in the calendar dropdown (by default +/- 100 years from current year) you can set minDate & maxDate props. The years list will adapt.