VueRangedatePicker

Date picker with range selection

Demo

https://bliblidotcom.github.io/vue-rangedate-picker/demo/

Installation

npm install --save vue-rangedate-picker

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue' import VueRangedatePicker from 'vue-rangedate-picker'  Vue.use(VueRangedatePicker)

Browser

<!-- Include after Vue --> <!-- Local files --> <script src="vue-rangedate-picker/dist/vue-rangedate-picker.min.js"></script>  <!-- From CDN --> <script src="https://unpkg.com/vue-rangedate-picker"></script>

Available Events

You can catch these below Events to <rangedate-picker @events="events"></rangedate-picker> template :

• selected

  Description : function that will $emit when datepicker set value, this function will get parameter response :

  {   start: dateObjectStart   end: dateObjectEnd }

Available Props

You can pass these below props to <rangedate-picker :props="props"></rangedate-picker> template :

• configs

  Description : -

  Type : Object

  Default Value : {}

• i18n

  Description : For text translation (currently: ID/EN)

  Type : String

  Default Value : 'ID'

• months

  Description : Array of months name

  Type : Array

  Default Value :

  ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli',  'Agustus', 'September', 'Oktober', 'November', 'Desember']

• shortDays

  Description : Array of days name in short

  Type : Array

  Default Value :

  ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab']

• captions

  Description : Object for text title and OK button

  Type : Object

  Default Value :

  {   'title': 'Choose Dates',   'ok_button': 'Apply' }

• format

  Description : Date format

  Type : String

  Default Value : 'DD MMM YYYY'

• styles

  Description : -

  Type : Object

  Default Value :

  {   daysWeeks: 'calendar_weeks',   days: 'calendar_days',   daysSelected: 'calendar_days_selected',   daysInRange: 'calendar_days_in-range',   firstDate: 'calendar_month_left',   secondDate: 'calendar_month_right',   presetRanges: 'calendar_preset-ranges' }

• initRange

  Description : -

  Type : Object

  Default Value : null

• startActiveMonth

  Description : Month will be shown in first launch

  Type : Number

  Default Value : new Date().getMonth()

• startActiveYear

  Description : Year will be shown in first launch

  Type : Number

  Default Value : new Date().getFullYear()

• presetRanges

  Description : Set of objects that will shown as quick selection of daterange

  Type : Object

  Example Object :

  {   today: function () {     const n = new Date()     const startToday = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1, 0, 0)     const endToday = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1, 23, 59)     return {       label: presetRangeLabel[i18n].today,       active: false,       dateRange: {         start: startToday,         end: endToday       }     }   } }

  Default Value :

  {   today: function () {     return {       // label: 'string', active: 'boolean', dateRange: {start: date, end: end}     }   },   thisMonth: function () {},   lastMonth: function () {},   last7days: function () {},   last30days: function () {} }

• compact

  Description : Set to 'true' if you want to make datepicker always shown in compact mode

  Type : String

  Default Value : 'false'

• righttoleft

  Description : Set to 'true' if you want datepicker shown align to right

  Type : String

  Default Value : 'false'

Development

Launch visual tests

npm run dev

Launch Karma with coverage

npm run dev:coverage

Build

Bundle the js and css of to the dist folder:

npm run build

Publishing

The prepublish hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

# Bump the version first # It'll also commit it and create a tag npm version # Push the bumped package and tags git push --follow-tags # Ship it 🚀 npm publish

License

MIT