Vuetify: [Feature Request] Date Range Picker

[wernerm]

A component that facilitates the selection of a pair of dates, which can be implemented as generic start and end dates.

What will it allow you to do that you can't do today?

The current v-date-picker only allows for selection of a single date at a time. A date range picker will facilitate the selection of a pair of dates.

How will it make current work-arounds straightforward?

Currently two separate v-date-pickers will have to be used with code to facilitate synchronising their dates. Here's an example of a crude workaround utilising v-date-picker that I have implemented for a recent project:

Inspiration

Element UI's datepicker's functionality serves as inspiration:

Specific features requested:

• Displaying more than one calendar month at a time
• Synchronised paging of months
• Scoped slots for save and cancel, and scoped slots for predefined actions and date ranges (eg to add action buttons to select "next 30 days", "last year", etc)

[bdeo]

Is there a target release for this?

[paladin2005]

@wernerm can you share your custom-date-range html template?

[OtavioCostaLima]

apoio

[donPuerto]

This is also from google data studio

[EvanZ]

Came here for this too. Was just looking at Google Analytics design.

[ghost]

Supporting this request, it's an important part of most people's UI and using two date pickers is often a bit unnatural.

[jmauerhan]

I'd like this for time ranges as well!

[praveenpuglia]

This may seem like promoting it but till the time a fully built one comes in vuetify, I made up my own solution. It's not perfect but it does the job.

Feel free to help it make better. :)

https://github.com/praveenpuglia/vuetify-daterange-picker

[renztoygwapo]

any updates for the date picker range request?

[maxcook]

This is such an important feature for many apps.
+1

[samirph]

On every Vuetify version update I wonder if date range/period support was added
+1

[wernerm]

If you would like to show support for this requested feature, please add a thumbs-up reaction to the original feature request above. (All "+1" comments will be deleted.)

[vincebanzon]

I hope they're working on it by now.

[NikoNagy]

Any update on this ?

Can we hope to see this in Front-End Pack ? 🤞

Thanks for your work.

[mariokresic]

Hello everyone,
temporary this function can be achieved with the events functionality. Events array should contain all dates from DateStart to DateEnd and custom-class for event-color. Custom class must be modified so it highlights selected dates-range.

I hope this will help someone.

Edit: here is quick example.

[praveenpuglia]

@mariokresic I have been thinking of doing this in https://github.com/praveenpuglia/vuetify-daterange-picker but afraid of when that might break so didn't do it. Would you like to send a PR and add that functionality there? That would be great :)

[mariokresic]

@praveenpuglia I will try to do it this weekend :)

[praveenpuglia]

Hi @mariokresic ! did you get a chance to see if you can do something for the component i mentioned? Probably shouldn't be talking here just to you. Let's meet somewhere else? praveenpuglia AT gmail.com ?

[acidjazz]

@mariokresic how about sharing the code used for that image as well?

[mariokresic]

@acidjazz here you go https://github.com/praveenpuglia/vuetify-daterange-picker/pull/26

I'll also try to create pull request for this feature in vuetify/vuetify

[Fohlen]

My current workaround for this feature is as follows:

<template>
  <div>
   <v-date-picker
     v-model="dates"
     :multiple="true"
     :min="min"
     :max=""
    />
  </div>
</template>

import addMonths from 'date-fns/add_months'
import subMonths from 'date-fns/sub_months'
import subDays from 'date-fns/sub_days'

<script>
export default {
  data () {
    return {
      dates: []
    }
  },
  computed: {
    min () {
      let min
      if (this.dates.length < 1) {
        min = subMonths(new Date(), 6)
      } else {
        min = subDays(new Date(this.dates[0]), 1)
      }
      return min.toISOString()
    },
    max () {
      let max
      if (this.dates.length <= 1) {
        max = addMonths(new Date(), 6)
      } else if (this.dates.length > 1) {
        max = new Date(this.dates[1])
      } else {
        max = addMonths(this.dates[0], 6)
      }
      return max.toISOString()
    },
    dateRange () {
      let sortedDates = this.dates.sort((a, b) => {
        if (a > b) {
          return 1
        } else if (a < b) {
         return -1
        } else {
         return 0
        }
      })

      return {
        start: sortedDays[0],
        end: sortedDays[sortedDays.length - 1]
      } 
    }
  }
}

The way this _"hack"_ works is:

• once a date is selected, min selection is restricted (no previous date can be selected)
• once a second date is selected, max selection is restricted (no further date can be selected)
• now you can only select dates between these two
• we will sort the outcome ascendingly, first to last
• the first and last events must be start and end dates

If you want to use this then you will probably need to substitute date-fns by something you fancy.
One can probably also enhance this by making :events all dates between start and end, so it appears to be marked.
Only downside: you can select more than two dates, which is confusing to the user. However I consider that more of a edge case because the majority of users (especially mobile) will never try this.
Hope it helps somebody!

[ngloom]

Date range picker is a key component for time span related system (like dashboard)
still looking forward for your official support.
Ps, thanks for the great work !

[danchapuk]

Anyone know of a good fix for this yet? Standard stuff really for dashboards and booking apps. Thanks in advance :)

[curiousPup]

Any updates on this?

[ngloom]

Hi, guys,
After working with vuetify for a while, I begin to like Vuetify. But sadly Date Range Picker is a very important component for our system, i didn't find any good enough solution by now.

So i just find one ugly but works Way, by Using ElementUI Date Picker, hope to provide a solution for those need it .

just add this in plugins/vuetify.js

import { DatePicker } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'

// configure language
locale.use(lang)

Vue.component(DatePicker.name, DatePicker);

Vue.use( Vuetify, { ...

and you can using date picker range in system

<el-date-picker v-model='range' type="daterange"/>

and the final result is as below .

At the end ,

1. Element UI is not designed for mobile usage, so it might work well there;
2. The temporary solution is ugly, and still waiting for the official version;
3. Really appreciate for the great work, thanks guys.

[postmastery]

Vuetify is the most comprehensive modern open source UI Controls library I found. But the omission of a date range picker is quite annoying, and also suprising. It's commonly used in reporting applications.

Besides Element UI, Syncfusion includes a date range picker in its ESJ 2 toolkit for Vue. It supports:

• min, max date
• min, max days in range
• range preset buttons

[effysetumeni]

any updates on the date picker ? @johnleider

[Darkside73]

Check out my dead simple implementation of date range picker
https://gist.github.com/Darkside73/24b6bf95c984ba616b0d71f144042f16

[mgohin]

Perfect solution @Darkside73 👍

[nevendyulgerov]

Here's my solution to this problem. A combo between vuetify and vue-flatpickr-component. I am using a v-text-field on top of the default flatpickr input field to maintain UI consistency with vuetify:

<template>
  <div data-component="date-picker">
    <v-text-field
      v-model="date"
      type="text"
      label="Select date range"
      class="date-time-field"
      prepend-inner-icon="date_range"
      :background-color="colors.shades.white"
      box
      @focus="toggleDatePicker"
    />

    <flat-pickr
      ref="datePicker"
      v-model="dateText"
      :placeholder="placeholder"
      :config="dateConfig"
    />
  </div>
</template>

<script>
  import colors from 'vuetify/es5/util/colors';
  import flatPickr from 'vue-flatpickr-component';
  import 'flatpickr/dist/flatpickr.css';

  export default {
    components: {
      flatPickr
    },
    props: {
      date: {
        type: String,
        required: true
      },
      placeholder: {
        type: String,
        default: ''
      },
      config: {
        type: Object,
        required: true
      },
      onChange: {
        type: Function,
        required: true
      }
    },
    data() {
      return {
        dateText: '',
        dateConfig: {},
        isOn: false,
        colors
      };
    },
    watch: {
      dateText(nextDate) {
        this.onChange(nextDate);
      }
    },
    created() {
      this.dateConfig = {
        ...this.config,
        onOpen: () => {
          this.isOn = true;
        },
        onClose: () => {
          this.isOn = false;
        }
      };
    },
    methods: {
      toggleDatePicker() {
        this.isOn = !this.isOn;

        if (this.isOn) {
          this.openDatePicker();
        } else {
          this.closeDatePicker();
        }
      },
      getDatePickerInstance() {
        return this.$refs.datePicker.$vnode.elm._flatpickr;
      },
      openDatePicker() {
        const datePicker = this.getDatePickerInstance();
        datePicker.open();
      },
      closeDatePicker() {
        const datePicker = this.getDatePickerInstance();
        datePicker.close();
      }
    }
  };
</script>

<style lang="stylus" scoped>
  [data-component="date-picker"] {
    position: relative;

    .date-time-field {
      z-index: 10;
    }

    .flatpickr-input {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
</style>

[a-di-ez]

My version of @Darkside73 idea:
https://gist.github.com/a-di-ez/e89d381e95e9745b2a88854f148137bb

[jonnylink]

Is this on the roadmap at all? Just wondering if I should check back or move on.

[nekosaur]

It is. Hopefully makes it in to 2.0, but no guarantees

[peluprvi]

Another design approach by https://github.com/leavjenn/SmoothDateRangePicker

[johnleider]

We haven't forgotten about this. It's understood that this is a highly requested feature and it is something we definitely intend to implement. Most of our resources have been allocated towards the v2.0 release, which is a herculean task and detracts from getting to some features. We thank you for understanding and your patience.

If you would like to collaborate on adding this feature to our existing date-picker, please message me in the discord community.

[alvinthen]

A collab with https://vcalendar.io/ would be great

[ngloom]

Vuetify 2.0 is released today and still no date range picker T.T

[Tinoooo]

@ngloom The date range picker was not planned for Vuetify 2.0

[YipingRuan]

• Add a property like "select-range" to flag
• Use v-date-picker prop "value" to hold array of size 2, [from, to] (have either 0 or 2 items)
• Calculate full array of dates, and send to "VDatePickerDateTable" (converted to the existing "multiple" feature). If sending array of dates is not efficient, allow sending a predicate for the child to test the dates?

[esynaps]

It would be great to have time pickers too ie a DateTimeRangePicker

[th3n3wguy]

I just need to jump in here and give an absolutely MASSIVE :+1: to the work by @YipingRuan. I am using this feature in my application now and it is amazingly simple.

[chans-me]

I've added date range highlighter in this codepen https://codepen.io/chansv/pen/OJVWBbG?editors=0010