v-range-pickerdeprecated

Install v-range-picker package.

Usage no npm install needed!

<script type="module">
  import vRangePicker from 'https://cdn.skypack.dev/v-range-picker';
</script>

README

v-range-picker

Installation

Install v-range-picker package.

npm i v-range-picker

yarn add v-range-picker

Configuration

You can use as general CSS frameworks.

import Vue from 'vue'
import { CoreUI } from 'v-range-picker'
import 'v-range-picker/dist/v-range-picker.css'

Vue.use(CoreUI)

Props

<v-range-picker
    ref="range-picker"
    :show-dropdown="showDropdown"
    :auto-apply="autoApply"
    :linked-calendars="linkedCalendars"
    :date-range="dateRange"
    :opens="opens"
    :date-format="dateFormat"
    @update="updateValues"
    @toggle="checkOpen"
>
    <div slot="input" slot-scope="picker" style="min-width: 350px;">
        {{ picker.startDate }} - {{ picker.endDate }}
    </div>
</v-range-picker>

dateRange is required, but set custom ranges in ranges

# Type Default
minDate Date ``
maxDate Date ``
linkedCalendars Boolean true
showDropdown Boolean false
dateRange Object ``
ranges Object ``
localeData Object ``
opens String center ( left / right )
dateFormat Boolean true
timePicker Boolean false
timePickerIncrement Number 5
timePicker24Hour Boolean true
timePickerSeconds Boolean false