DateTimeRangePicker

Date time range picker component based on Flatpickr and Quasar. Contains flatpickr wrapper and date-time picker.

Installation

# npm
npm install git+https://github.com/flespi-software/DateTimeRangePicker.git --save

Prerequisites:

• Node.js (>=9.x)
• npm version 5+ and Git
• Quasar (^0.17.0)
• Vue (^2.5.0)

Run examples on your localhost

• Clone this repo
• You should have quasar (^0.17.0) pre-installed
• Install dependencies npm install
• Run webpack dev server quasar dev
• This should open the demo page at http://localhost:8080 in your default web browser

DateTimeRangePicker component

Features

• ES6 Javascript
• Vue.js
• Writing .vue files
• Rollup
• NPM ecosystems

Usage

In quasar.config.js

  framework: {
    components: [
      'QBtnToggle'
    ]
  }

<template>
  <div>
    <date-range v-model="date"/>
  </div>
</template>

<script>
  import DateRange from 'datetimerangepicker'

  export default {
    data () {
      return {
        date: [new Date()],
      }
    },
    components: {
      DateRange
    }
  }
</script>

Available props

The component accepts these props:

| Attribute | Type | Default | Description | | :--- | :---: | :---: | :--- | | v-model / value | Array | [new Date()] | RangeValue (required) | | mode | Number{0,1,2,3,4} | 0 | Component mode: 0 - Single date picker, 1 - week picker, 2 - month picker, 3 - custom range picker, 4 - manual formated or timestamp mode| | theme | Object | {color:'grey-9', bgColor:'white', modeSwitch:true} | color - text color, bgColor - background color, modeSwitch - need show switch mode buttons |

Available events

The component accepts these props:

| Event | Payload | Description | | :--- | :---: | :--- | | input | Array | Selected dates timestamps array | | error | Boolean | Error in time range. | | change:mode | Number | New component mode |

Flatpickr wrapper

Usage

<template>
  <div>
    <vue-flat-pickr v-model="date" :config="config" />
  </div>
</template>

<script>
  import { VueFlatPickr } from 'datetimerangepicker'

  export default {
    data () {
      return {
        date: new Date(),
        config: {
          wrap: true, // set wrap to true only when using 'input-group'
          altFormat: 'M j, Y',
          altInput: true,
          dateFormat: 'Y-m-d',
          locale: Hindi, // locale for this instance only
        }
      }
    },
    components: {
      VueFlatPickr
    }
  }
</script>

Events

• The component can emit all possible events, you can listen to them in your component

<vue-flat-pickr v-model="date" @on-change="doSomethingOnChange" @on-close="doSomethingOnClose" />

• Events names has been converted to kebab-case.
• You can still pass your methods in :config like original flatpickr do.

Available props

The component accepts these props:

| Attribute | Type | Default | Description | | :--- | :---: | :---: | :--- | | v-model / value | String / Date Object / Array / Timestamp / null | null | Date-picker value (required) | | config | Object | {wrap:false} | Flatpickr configuration options| | events | Array | Array of useful events | Customise the events to be emitted| | theme | Object | {color:'grey-9', bgColor:'white'} | color - text color, bgColor - background color |

License

MIT License