arvearve / vue2-daterange-picker

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

vue2-daterange-picker

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

NOT READY FOR PRODUCTION YET

Demo

You can see a demo here: https://innologica.github.io/vue2-daterange-picker/

Installlation

# install via npm
npm i vue2-daterange-picker --save

Usage

import DateRangePicker from 'vue2-daterange-picker'

export default {
    components: { DateRangePicker },
    data() {
        return {
            startDate: '2017-09-05',
            endDate: '2017-09-15',
            locale: {
                direction: 'ltr', //direction of text
                format: 'DD-MM-YYYY', //fomart of the dates displayed
                separator: ' - ', //separator between the two ranges
                applyLabel: 'Apply',
                cancelLabel: 'Cancel',
                weekLabel: 'W',
                customRangeLabel: 'Custom Range',
                daysOfWeek: moment.weekdaysMin(), //array of days - see moment documenations for details
                monthNames: moment.monthsShort(), //array of month names - see moment documenations for details
                firstDay: 1 //ISO first day of week - see moment documenations for details
            }
        }
    }
}

<template>
    <date-range-picker 
        :startDate="startDate" 
        :endDate="endDate" 
        @update="console.log(value)"
        :locale-data="locale"
    ></date-range-picker>
</template>

Properties

---

You can define format and display options via the localeData prop. This is the default locale object :

      let default_locale = {
        direction: 'ltr', //direction of text
        format: moment.localeData().longDateFormat('L'), //fomart of the dates displayed
        separator: ' - ', //separator between the two ranges
        applyLabel: 'Apply',
        cancelLabel: 'Cancel',
        weekLabel: 'W',
        customRangeLabel: 'Custom Range',
        daysOfWeek: moment.weekdaysMin(), //array of days - see moment documenations for details
        monthNames: moment.monthsShort(), //array of month names - see moment documenations for details
        firstDay: moment.localeData().firstDayOfWeek() //ISO first day of week - see moment documenations for details
      }

TODO

• documentation
• tests
• disabled dates
• make install function
• export single components

Run local demo

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Publish

Bump the version the publish the package

npm version patch/minor/major
npm publish