Vue2 date range picker - v0.6.8

# Date range picker

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

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

# Installation

npm i vue2-daterange-picker --save

or

yarn add vue2-daterange-picker

import to use:

import DateRangePicker from 'vue2-daterange-picker'

# Usage

Register the component

import DateRangePicker from 'vue2-daterange-picker'
//you need to import the CSS manually
import 'vue2-daterange-picker/dist/vue2-daterange-picker.css'

export default {
    components: { DateRangePicker },
}

    <date-range-picker
            ref="picker"
            :opens="opens"
            :locale-data="{ firstDay: 1, 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="logEvent('event: open', $event)"
            @start-selection="logEvent('event: startSelection', $event)"
            @finish-selection="logEvent('event: finishSelection', $event)"
            :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

December 10, 2019 - December 20, 2019

dateRange: { startDate, endDate }

Other props:

Whether the picker appears aligned to the left, to the right, or centered relative to the HTML element it's attached to. Or inline to display it inline.

Select the calendar mode single selects only single date with 1 calendar. Range is single calendar with ranges. default are 2 calendars with range selection.

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
Defaults to true. If set to false only the ranges will be visible if one of them is selected. If no range is selected or you have clicked the "Custom ranges" then the calendar selectors are shown.
Defaults to false. Append the dropdown element to the end of the body * and size/position it dynamically.
Defaults to true. Close the dropdown on escape key pressed.
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, String false Only show a single calendar, with or without ranges. Set true or 'single' for a single calendar with no ranges, single dates only. Set 'range' for a single calendar WITH ranges. Set false for a double calendar with ranges.
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 Object 
{
startDate: null,
endDate: null
}
 This is the v-model prop which the component uses. This should be an object containing startDate and endDate props. Each of the props should be a string which can be parsed by Date, or preferably a Date Object.
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", "right" or "inline"
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 If set to false and one of the predefined ranges is selected then calendars are hidden. If no range is selected or you have clicked the "Custom ranges" then the calendars are shown.
disabled Boolean false Disabled state. If true picker do not popup on click.
control-container-class Object, String form-control reportrange-text Class of html picker control container
append-to-body Boolean false Append the dropdown element to the end of the body and size/position it dynamically. Use it if you have overflow or z-index issues.
calculate-position Function When `appendToBody` is true, this function is responsible for positioning the drop down list. If a function is returned from `calculatePosition`, it will be called when the drop down list is removed from the DOM. This allows for any garbage collection you may need to do.
close-on-esc Boolean true Whether to close the dropdown on "esc"
readonly Boolean Makes the picker readonly. No button in footer. No ranges. Cannot change.
  • sample locale data
{
    direction: 'ltr',
    format: 'mm/dd/yyyy',
    separator: ' - ',
    applyLabel: 'Apply',
    cancelLabel: 'Cancel',
    weekLabel: 'W',
    customRangeLabel: 'Custom Range',
    daysOfWeek: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    firstDay: 0
}

See this link for details on date format - https://blog.stevenlevithan.com/archives/date-time-format

  • default ranges object (set to false to hide ranges)

To specify ranges you need to pass and array where each element is an array with exactly two Date objects (from, to) or their timestamp equivalent.

let today = new Date()
today.setHours(0, 0, 0, 0)

let yesterday = new Date()
yesterday.setDate(today.getDate() - 1)
yesterday.setHours(0, 0, 0, 0);
{
    'Today': [today, today],
    'Yesterday': [yesterday, yesterday],
    'This month': [thisMonthStart, thisMonthEnd],
    'This year': [new Date(today.getFullYear(), 0, 1), new Date(today.getFullYear(), 11, 31)],
    'Last month': [new Date(today.getFullYear(), today.getMonth() - 1, 1), new Date(today.getFullYear(), today.getMonth(), 0)],
}

# Events

Event Params Description
change-month
  • (monthDate) date - displayed (first day of the month)
  • (Any) calendarIndex - int 0 - first(left) calendar, 1 - second(right) calendar
 Emits event when the viewing month is changes. The second param is the index of the calendar.
finish-selection
  • (Date) date - the date clicked
 Emits event when the user clicks the second date and finishes selection
start-selection
  • (Date) date - the date clicked
 Emits event when the user clicks the first date and starts selection
hover-date
  • (Date) value - the date that is being hovered
 Emits event when the mouse hovers a date
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).
select
  • (json) value - json object containing the dates: {startDate, endDate}
 Emits when the user selects a range from the picker.

# 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 @param {string} rangeText - the calculated rangeText string

header

Optional header slot (same props as footer) @see footer slot for documentation

ranges

Allows you to change the range @param {Date} startDate - current startDate @param {Date} endDate - current endDate @param {object} ranges - object with ranges @param {Fn} clickRange(dateRange) - call to select the dateRange - any two date objects or an object from tha ranges array

date

date

Allows you to change date cell slot. By default it renders the day number @param {Date} date - the date being rendered into the table cell

footer

Allows you to change footer of the component (where the buttons are) @param {string} rangeText - the formatted date range by the component @param {object} locale - the locale object @see locale prop @param {function} clickCancel - function which is called when you want to cancel the range picking and reset old values @param {function} clickApply -function which to call when you want to apply the selection @param {boolean} in_selection - is the picker in selection mode @param {boolean} autoApply - value of the autoApply prop (whether to select immediately)

Advanced →