quasar-ui-calender-touch v1.2.0

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:

Available events

The component accepts these props:

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:

License

MIT License