# 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

yarn add vue-daterange-picker-light

import to use:

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

# Usage

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

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