Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vuetify DateRangePicker
<template>
<v-date-picker
class="date-range-picker" :value="value" @input="onInput"
color="light-blue" event-color="light-blue lighten-4 date-in-range" :events="selectedRange"
:allowed-dates="allowedDates" no-title multiple
>
<slot></slot>
</v-date-picker>
</template>
<script>
import moment from 'moment'
export default {
props: {
value: {
type: Array,
default: () => []
},
allowedDates: Function
},
data () {
return {
dates: []
}
},
created () {
this.dates = this.value
},
watch: {
value (val) {
this.dates = val
}
},
methods: {
diff (a, b) {
return a.filter(v => !b.includes(v))
},
onInput (val) {
let newRange
if (val.length > 2) {
let newDate = this.diff(val, this.dates)[0]
let currentRange = this.dates.sort()
newRange = [currentRange[0], newDate]
} else {
newRange = val
}
this.dates = newRange.sort()
this.$emit('input', this.dates)
},
selectedRange (date) {
if (this.dates.length == 2) {
return moment(date).isBetween(...this.dates)
}
}
}
}
</script>
<style lang="stylus" scoped>
.date-range-picker
>>> .v-date-picker-table__events
height 32px
width 32px
z-index 0
left -2px
top -1px
>>> .date-in-range
height 32px
width 32px
>>> .v-btn__content
z-index 1
</style>
<template>
<v-menu
ref="menu" v-model="menu" :close-on-content-click="false" :nudge-right="30"
lazy transition="scale-transition" offset-y full-width min-width="290px"
>
<v-text-field slot="activator" :value="formattedRange" readonly></v-text-field>
<date-range-picker v-model="dateRange">
<v-spacer></v-spacer>
<v-btn @click="menu = false" color="primary" flat>OK</v-btn>
</date-range-picker>
</v-menu>
</template>
<script>
import moment from 'moment'
import DateRangePicker from './DateRangePicker'
export default {
components: { DateRangePicker },
data () {
return {
dateRange: [],
menu: false
}
},
computed: {
formattedRange () {
if (this.dateRange.length) {
let range = moment(this.dateRange[0]).format('D MMM')
if (this.dateRange[1]) {
range += ' - ' + moment(this.dateRange[1]).format('D MMM')
}
return range
}
}
}
}
</script>
@mgohin

This comment has been minimized.

Copy link

mgohin commented Feb 13, 2019

Thanks that's perfect for me !

example.vue#30 it should be if (this. dateRange[1]) {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.