Date time range picker component based on Flatpickr and Quasar. Contains flatpickr wrapper and date-time picker.
# npm
npm install git+https://github.com/flespi-software/DateTimeRangePicker.git --save- 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:8080in your default web browser
- ES6 Javascript
- Vue.js
- Writing .vue files
- Rollup
- NPM ecosystems
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>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(it works mode autodetect if enabled, else you can use $refs.range.getModeByRange(range)) |
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 |
<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>- 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
:configlike original flatpickr do.
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 |
MIT License
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent