Vue-date-range-select NPM

Date range component interaction

Vue date range select

A Vue date range select component for updating Javascript Date objects. Provides great user feedback, easy customization by overwriting the styles. (When to show / hide the calendar is up to you)

Created with Typescript, Vue and uses Rollup to build the npm package.

Demo
Installation
Usage
Available props
Component functions
Code example
Contributions

Installation

npm install vue-date-range-select

Usage

Import component

import VueDateRangeSelect from 'vue-date-range-select';

Import styles, or write your own styles (scroll to bottom to copy the initial styling)

import 'vue-date-range-select/dist/styles.css';

Add component to your template

<template>
  <!-- ... -->
  <vue-date-range-select v-model="dateRange">
  <!-- ... -->
</template>

<script>
export default {
  // ...
  components: {
    VueDateRangeSelect
  },
  data() {
    return {
      dateRange: { endDate: null, startDate: null },
    }
  },
  // ...
}
</script>

Available props

Prop	Type	Default	Description
value	{ startDate: null \| Date, endDate: null \| Date }	{ startDate: null, endDate: null }	Date values of date picker
monthCount	number	2	Amount of months shown in select
locale	string	en-EN	Used for setting language of months and days MDN
hideYear	boolean	false	Stop showing year next to month
canSelectInPast	boolean	false	Disables the user to select days in the past
startOnSunday	boolean	false	Show Sundays first

Component functions

Functions inside the vue date range component to mutate the state from outside

<template>
  <!-- ... -->
  <vue-date-range-select ref="dateRange" v-model="{ endDate: null, startDate: null }"/>

  <!-- Clear both startDate and endDate -->
  <button @click="$refs.dateRange.clear()">Clear</button>

  <!-- Force selecting endDate first  -->
  <button @click="$refs.dateRange.isSelectingStartDate = false">Select endDate</button>

  <!-- Force selecting startDate first  -->
  <button @click="$refs.dateRange.isSelectingStartDate = true">Select startDate</button>
  <!-- ... -->
</template>

Slots

Add fields to the top of the date range select, or to the bottom

<template>
  <!-- ... -->
  <vue-date-range-select v-model="{ endDate: null, startDate: null }">
    <template #header>Content added to the top of the calendar</template>
    <template #footer>Content added to the bottom of the calendar</template>
  </vue-date-range-select>
  <!-- ... -->
</template>