praveenpuglia / vuetify-daterange-picker

The missing date range picker for Vuetify JS you have been looking for.

Vuetify Daterange Picker

The missing date range picker for Vuetify JS you have been looking for.

IN RED COLOR 🚨 This project is not maintained. I love that it received the attention it got. It is actually used by a lot of people and that gives me satisfaction. However, I don't have enough time to maintain it, look after issues or get up to speed with Vuetify's development.

I still welcome PRs for features and bug fixes but apart from that, you are on your own. It was always a hack and it would never be the date range input we all want from Vuetify. Sorry and thanks!

I highly recommend using https://vcalendar.io/.

Installation, Usage & API

https://vuetify-daterange-picker.gitbook.io/docs

---

If you liked the component, please consider giving it a ⭐️.

vuetify-daterange-picker's Issues

Input triggers twice

It appears that every date selection triggers the input event twice. You can see this in the sandbox by adding console.log

allow presets section to be completely removed

Currently even if the presets array is empty, the presets section will get rendered which is unwanted.

Allow the user to specify no-presets on the component instance so they can completely remove that section from the picker if they wanted to.

Allow to change dates from inputs

Hi, Thanks for your work.

It's not possible to change the dates from the inputs.

Thanks again, bye

vertical pickers

any idea why I have the picker vertical not horizontal ??

Internalization name of presets

I make internalization.

labels translated success. dataRangeLabels

But presets not translated.

I tried to transfer as computed property, dont works.

Solution to the problem: property "presets" make as props.

Update for Vuetify 2

Not sure when you were planning on updating to Vuetify 2. The only real change is a minor adjustment to the activator for the menu in the datepicker. Here is a fix, if you are interested in updating I can submit a PR.

master...user3483203:master

Date range picker witout dialog

Could you move your awesome daterangepicker component to separately component please.
I want to use it without v-dialog

Markup is broken

How to change 'apply', 'close' buttons and menu activator?

I want to change buttons from menu under pickers. How can I do it?
Also I want to change activator. Is it possible?

Lack of documentation based on promoted examples

Based on examples, this plugin lacks documentation to replicate examples provided here.

http://vuetify-daterange.surge.sh/

[Feature Request] closeable calendar pane

I'd like to close calendar pane after choosing date range like at element.io
Add this option please.

Doesn't work with vue-cli 3 when use Build

When use Build with vue cli 3 , data picker not use own style, but with dev all is ok
build version looks like

but dev version looks

dev option - "serve": "vue-cli-service serve",
build - "build": "rm -rf ../public/{js,css,img} && vue-cli-service build --no-clean --watch"

but if copy paste DateRange component to my project and specify in each component all is ok

do you have maxDate .. can I set maxDate?

Can I allow selecting ranges in the future?

How to reset daterange value?

Hi, it is possible to reset the daterange input value?

Allow to pick dates on one month only

Hello guys!

Please help to set options for my needs.

I want to allow to user to pick dates in range of one month of any year. Thanks.

Date format issue

Hello,
I tried to use the date range picker but when I do so I have this error :

It's because date formatting isn't correct on the code : it should be "yyyy-MM-dd" instead of "YYYY-MM-DD" (see date-fns doc).
I would have done the changes by myself but I can't manage to install all the dependencies required for the project.

Could you please fix it ? Your tool seems so great, I'd love to be able to use it on my project !

Dialog action button text config (Localisation support)

currently we could change calendar language via props, but dialog actions seams to be hardcoded as "Cancel", "Apply"
<v-card-actions> <v-spacer></v-spacer> <v-btn flat @click="reset">Reset</v-btn> <v-btn flat @click="menu = false">Cancel</v-btn> <v-btn @click="applyRange" color="primary" :disabled="!bothSelected" >Apply</v-btn > </v-card-actions>

Add tests

Can't Supported Mobile Site

I can't select to date in Mobile Site

Migrate from moment.js to `date-fns`

Reason: moment.js produces larger bundle size and since we are not using all of moment.js it makes sense to import what we use only instead of full moment.js but moment.js has a performance overhead. Read this post for more info: https://raygun.com/blog/moment-js-vs-date-fns/

So it's better to use date-fns and import only what we use like

import format from 'date-fns/format';

Allow empty fields and clear

Hello,

Is it possible to initialize daterange picker with empty fields ?
After select a range, a reset button would be great !

Thanks !

Does not work with Nuxt.js

Hi, thanks for your awesome plugin :)
I used this with Vue.js and worked fine. But in my current project, it's not working.

Environments:

"nuxt": "^2.4.3",
"vuetify": "^1.5.0",
"vuetify-daterange-picker": "^2.6.2"

appreciate your help :)

[Feature request] Daterange picker in pop up menu

Hi, first of all, nice component!

I was wondering if there is a way to use it as a pop up menu, like the official date picker from Vuetify.

Ideally, the menu will only show up when the user clicks on the input field to change the date.

Thanks!

Change value prop

Hello,

i want to set a default start and end date in my picker but its didnt work. Here my code:

<v-daterange
 v-model="range"
 display-format="DD-MM-YYYY"
:input-props="inputProps"
:menu-props="menuProps"
 :value="datepickerinivalues"
></v-daterange>

Here my data:

inputProps: { solo: true, style: { width: '500px' } },
menuProps: { offsetY: true, closeOnContentClick: false },  
datepickerinivalues:{ start: "2019-05-20", end: "2019.05.24"}

Error using vuetify components

I have a project with vuetify. Vuetify is working well all across my project. But, when y try to use the date range piker (globally registered) it fails with the following errors:

vue.runtime.esm.js?2b0e:587 [Vue warn]: Unknown custom element: <v-list> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <VDaterange>

vue.runtime.esm.js?2b0e:587 [Vue warn]: Unknown custom element: <v-subheader> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <VDaterange>

Throws the same error with all vuetify components.

I have [email protected] installed with Vue CLI 3 and initialized like that:

// /src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
import VDateRange from 'vuetify-daterange-picker';
import 'vuetify-daterange-picker/dist/vuetify-daterange-picker.css';

Vue.use(Vuetify, {
  iconfont: 'md',
})

Vue.use(VDateRange);

I realized that if i change import Vuetify from 'vuetify/lib' to import Vuetify from 'vuetify', everything seems to work fine but i don't know what impact it will have in vuetify.

Input field readout is not the same as the selected date

For example, if I select september 6th - 11th in the date picker the input field reads 5th - 10th. This doesn't seem to be the case with the top readout inside of badges.

Is there a configuration that I am missing? This doesn't seem intuitive that the readout would be different than the dates selected.

Need a demo site

Yeah! Let people play

update to vuetify js 1.x

version [3.1.X] is not working with latest vuetify and cli

So i've been trying to use this module in latest vuetify setup when I try to use.
It shows me error in console saying that this.$vuetify is undefined in this module.

it's working till version 3.0.0 without some props like preset, preset-label etc but on latest versions it's breaking. here is my console error

some module usage snippet
Plugin
`
//VuetifyDatePicker

import VuetifyDaterangePicker from "vuetify-daterange-picker";

Vue.use(VuetifyDaterangePicker)
`

main.js
import "vuetify-daterange-picker/dist/vuetify-daterange-picker.css"

some-component.vue
<v-daterange ..../>

Importing the date picker locally do not work

I imported these:

import DateRange from 'vuetify-daterange-picker';
import 'vuetify-daterange-picker/dist/vuetify-daterange-picker.css';

And this on components section:

export default {
	components: { DateRange.name: DateRange },

Obviously this won't work

Error

What is the problem?

Allow for internationalization

Hi,
While most of the component can be translated through many means, the date picker itself cannot.
And this is a feature that is available in Vuetify's date picker.

Is it possible to add a prop that allows for internationalization?

accept configuration props that the vuetify datepicker accepts

vuetify's picker accepts a bunch of properties like dark, light or props to change the chevron icons. Currently the date range picker doesn't allow any of that.

I think it'll be a good thing to just accept those same inputs and if they are present in the component, then we pass them along to the inner date pickers.

Update range on model change

Hello and thank you for the great component!
Wish it is incorporated into Vuetify in the future.

In the meantime I wish to request a new feature - to be able to update the selected date range based on the model provided. I think with a simple watcher on value should do the trick.

License

Hello!
Please add license to your repo

Add an example that shows how the component can be used inside a menu

From #17

• show integration with v-menu
• show formatting of the date output

How to change start and end date labels?

Title says it all.

[v3] end date picker doesn't conform to min prop

On v3.0.1, min doesn't seem to affect the end date picker.

<v-date-range
  v-model="range"
  :min="'2019-02-28'"
/>

add live examples with v3

Since codesandbox complains about stylus and globs in it, it is hard for me to set up a codesandbox instance with vuetify and examples.

Try to find other workaround and include embedded examples in the gitbook documentation

[Feature Request] Select textfield style

Feature request: Ability to select the type of textfield through props or options (i.e. Regular, Box, Solo or Outline)

Edit: Would also include updating to latest Vuetify 1.2.x

I'm willing to submit a PR.

Vuetify 1.1.X support

Hi, I'm trying to figure it out if there is an incompatibility between vuetify-daterange-picker 2.4.0 and Vuetify 1.1.8. My component is being rendered weirdly (see attached screenshot), and so far I haven't been able to figure out why. A problem with font awesome, perhaps?

If library version problems are ruled out, I can try to make a reproducible example here.

And this is my dependencies:

 "dependencies": {
    "date-fns": "^1.29.0",
    "font-awesome": "^4.7.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuetify": "^1.1.8",
    "vuetify-daterange-picker": "^2.4.0",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^2.0.1",
    "chromedriver": "^2.27.2",
    "copy-webpack-plugin": "^4.0.1",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^22.0.4",
    "jest-serializer-vue": "^0.3.0",
    "nightwatch": "^1.0.8",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^1.0.1",
    "vue-jest": "^1.0.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

dark and light themes

Currently it's light by default which may not be always desired.
Let the user pass in dark or light boolean prop just like any other vuetify component and set up the component with that tint.

Install failed first attempt

So far its unable to locate modules on install:

These relative modules were not found:

* ../../../src/stylus/components/_app.styl in ./node_modules/vuetify/lib/components/VApp/VApp.js
* ../../../src/stylus/components/_autocompletes.styl in ./node_modules/vuetify/lib/components/VAutocomplete/VAutocomplete.js, ./node_modules/vuetify/lib/components/VCombobox/VCombobox.js
* ../../../src/stylus/components/_avatars.styl in ./node_modules/vuetify/lib/components/VAvatar/VAvatar.js
* ../../../src/stylus/components/_badges.styl in ./node_modules/vuetify/lib/components/VBadge/VBadge.js
* ../../../src/stylus/components/_bottom-navs.styl in ./node_modules/vuetify/lib/components/VBottomNav/VBottomNav.js
* ../../../src/stylus/components/_bottom-sheets.styl in ./node_modules/vuetify/lib/components/VBottomSheet/VBottomSheet.js
* ../../../src/stylus/components/_breadcrumbs.styl in ./node_modules/vuetify/lib/components/VBreadcrumbs/VBreadcrumbs.js
* ../../../src/stylus/components/_buttons.styl in ./node_modules/vuetify/lib/components/VBtn/VBtn.js
* ../../../src/stylus/components/_button-toggle.styl in ./node_modules/vuetify/lib/components/VBtnToggle/VBtnToggle.js
* ../../../src/stylus/components/_calendar-daily.styl in ./node_modules/vuetify/lib/components/VCalendar/VCalendarDaily.js
* ../../../src/stylus/components/_calendar-weekly.styl in ./node_modules/vuetify/lib/components/VCalendar/VCalendarWeekly.js, ./node_modules/vuetify/lib/components/VCalendar/VCalendarMonthly.js
* ../../../src/stylus/components/_cards.styl in ./node_modules/vuetify/lib/components/VCard/VCard.js, ./node_modules/vuetify/lib/components/VPicker/VPicker.js and 1 other
* ../../../src/stylus/components/_carousel.styl in ./node_modules/vuetify/lib/components/VCarousel/VCarousel.js
* ../../../src/stylus/components/_selection-controls.styl in ./node_modules/vuetify/lib/components/VCheckbox/VCheckbox.js, ./node_modules/vuetify/lib/components/VRadioGroup/VRadioGroup.js and 1 other
* ../../../src/stylus/components/_chips.styl in ./node_modules/vuetify/lib/components/VChip/VChip.js
* ../../../src/stylus/components/_counters.styl in ./node_modules/vuetify/lib/components/VCounter/VCounter.js
* ../../../src/stylus/components/_data-iterator.styl in ./node_modules/vuetify/lib/components/VDataIterator/VDataIterator.js
* ../../../src/stylus/components/_tables.styl in ./node_modules/vuetify/lib/components/VDataTable/VDataTable.js
* ../../../src/stylus/components/_data-table.styl in ./node_modules/vuetify/lib/components/VDataTable/VDataTable.js
* ../../../src/stylus/components/_small-dialog.styl in ./node_modules/vuetify/lib/components/VDataTable/VEditDialog.js
* ../../../src/stylus/components/_date-picker-title.styl in ./node_modules/vuetify/lib/components/VDatePicker/VDatePickerTitle.js
* ../../../src/stylus/components/_date-picker-header.styl in ./node_modules/vuetify/lib/components/VDatePicker/VDatePickerHeader.js
* ../../../src/stylus/components/_date-picker-years.styl in ./node_modules/vuetify/lib/components/VDatePicker/VDatePickerYears.js
* ../../../src/stylus/components/_dialogs.styl in ./node_modules/vuetify/lib/components/VDialog/VDialog.js
* ../../../src/stylus/components/_dividers.styl in ./node_modules/vuetify/lib/components/VDivider/VDivider.js
* ../../../src/stylus/components/_expansion-panel.styl in ./node_modules/vuetify/lib/components/VExpansionPanel/VExpansionPanel.js

And then a bunch of errors:

ERROR in ./node_modules/vuetify-daterange-picker/dist/vuetify-daterange-picker.common.js
Module not found: Error: Can't resolve 'date-fns' in '/Development/D/sm-bold/node_modules/vuetify-daterange-picker/dist'
 @ ./node_modules/vuetify-daterange-picker/dist/vuetify-daterange-picker.common.js 293:17-36
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./node_modules/vuetify/lib/components/VApp/VApp.js
Module not found: Error: Can't resolve 'stylus-loader' in '/Development/D/sm-bold'
 @ ./node_modules/vuetify/lib/components/VApp/VApp.js 3:0-50
 @ ./node_modules/vuetify/lib/components/VApp/index.js
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./node_modules/vuetify-daterange-picker/dist/vuetify-daterange-picker.common.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

... and it goes on

I have the latest Vueify installed and most of the vue modules. I followed installation steps and this is what I got.

Cannot find module "vuetify/lib"

Hello,
I tried to use the new version of the plugin but know I have this error when I run my application

Do you know why I have this message ?

Highlight range doesn't work with vuetify 1.4

This library is not compatible with vuetify version 1.3 and up.

Presents don't show in UI

Not sure if this has been updated with the latest Vueify, I have noticed the calendar itself is changed compared to the examples of this plugin.

Passing in presets seems to do nothing in the Date range UI under presets div.

presets: [
                    {
                        label: 'Today',
                        range: [
                            format(new Date(), 'YYYY-MM-DD'),
                            format(new Date(), 'YYYY-MM-DD'),
                        ],
                    },
                    {
                        label: 'Yesterday',
                        range: [
                            format(subDays(new Date(), 1), 'YYYY-MM-DD'),
                            format(subDays(new Date(), 1), 'YYYY-MM-DD'),
                        ],
                    },
                    {
                        label: 'Last 30 Days',
                        range: [
                            format(subDays(new Date(), 30), 'YYYY-MM-DD'),
                            format(subDays(new Date(), 1), 'YYYY-MM-DD'),
                        ],
                    },
                ],

The presets list doesn't show any. Using exact code from examples. And this could be due to the lack of documentation, but this package so far isn't usable out of the box.

<VDaterange :options="dateRangeOptions" @input="onDateRangeChange" />

does not work with vuetify 1

can you please update this to work with vuetify 1. vuetify 1 expects allowed dates in date picker to be function, this is passing a object at the moment

Broken?

I have a single page component and

<template>
 <v-daterange></v-daterange>
</template>

<script>
    import VDateRange from 'vuetify-daterange-picker';
    import 'vuetify-daterange-picker/dist/vuetify-daterange-picker.css';

    export default {
        components: {
            VDateRange,
        },
    }
</script>

results in Unknown custom element: <v-daterange> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Tried

components: {
            'v-daterange': VDateRange,
        },

But got Failed to mount component: template or render function not defined.

DateRange component doesn't trigger any HMR while developing

@vinaypuppal In App.vue, we should really be pointing the source DateRange.vue and not the dist version.
https://github.com/praveenpuglia/vuetify-daterange-picker/blob/master/demo/App.vue#L20-L21
This will stop HMR from working for any source changes in DateRange.vue.

import DateRange from '../src/DateRange';

should be good enough for development.

remove the wrapper card component

The current component is rendered inside a card which may not be something that's wanted in all use cases.

Example - opening the datepicker inside a menu. In that case the padding all around will be too much.

It's generally a bad thing to assume that it'll always be a card. Let the user put it anywhere they want to, a card, a menu, anywhere.