# 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 (in case you want to override it)
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="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

December 10, 2019 - December 20, 2019
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
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.
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 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" 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 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.
date-util Object, String native The dateUtil implementation to use. Possible values: native, moment, date-fns. If an object is given it must implement all the functions required. See below for custom date util object template*
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
  • 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
}
  • default ranges object (set to false to hide ranges)
{
    'Today',
    'Yesterday',
    'This month',
    'This year',
    'Last week',
    'Last month',
}
  • custom date util object (keep in mind that this can change in the future)
const DateUtil = {
  /**
   * Compares if two date1 and date2 are the same with specified granularity(date, month, year)
   * @param date1
   * @param date2
   * @param granularity
   * @return Boolean returns if the dates are the same with this granularity
   */
  isSame: (date1, date2, granularity = 'date') => {},
  /**
   * Get number of days in month specified by year and month
   * @param year
   * @param month
   * @return int number of days
   */
  daysInMonth: (year, month) => {},
  /**
   * Return ISO week number for date
   * @param date
   * returns int the week number
   */
  weekNumber: (date) => {},
  /**
   * Formats the date object with the specified mask.
   * @see https://github.com/felixge/node-dateformat
   *
   * @param date
   * @param mask
   * return String the formatted date
   */
  format: (date, mask) => {},
  /**
   * Get next month from date
   * @param date
   * @return Date the first day of the next month
   */
  nextMonth: (date) => {},
  /**
   * Get previous month from date
   * @param date
   * @return Date the first day of the previous month
   */
  prevMonth: (date) => {},
  /**
   * Validates a date base on date range [min, max]. Keeps the date in the constraint.
   * @param newDate
   * @param min
   * @param max
   * @return Date the date after it has been checked if it is in the range specified.
   */
  validateDateRange: (newDate, min, max) => {},
  /**
   * Returns the locale data based on passed options object.
   * @param options
   * @return {{cancelLabel: string, applyLabel: string, format: string, daysOfWeek: *, separator: string, customRangeLabel: string, weekLabel: string, direction: string}}
   */
  localeData: (options) => {
    let default_locale = {
      direction: 'ltr',
      format: 'mm/dd/yyyy',
      separator: ' - ',
      applyLabel: 'Apply',
      cancelLabel: 'Cancel',
      weekLabel: 'W',
      customRangeLabel: 'Custom Range',
      daysOfWeek: [],//days of week (short),
      monthNames: [],// month names (short),
      firstDay: 0
    };

    return {...default_locale, ...options }
  },
  /**
   * Returns date in the format YYYYMM
   * @param date
   * return String the date formatted
   */
  yearMonth: (date) => {}
}

export default DateUtil

# 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.
hoverDate
  • (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).

# 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