search

nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.37k stars 850 forks source link

Question: Possible to have custom panes in date picker #306

Open cberthiaume opened 5 years ago

cberthiaume commented 5 years ago

Thanks for all the work on this library. We've been using it at our company for single date selection for a while now and have been very happy with it.

We need a date range selector now and would like to use v-calendar. Ideally, we would be able to allow the user to select from pre-defined ranges something like you see here:

image

Is it possible for us to create a custom pane, like the one on the left, for use with the date picker and have it display along with the month panes? I apologize if this is already covered in the docs. I spent a while looking but couldn't see how to do it.

I see how we could create a custom input to have those pre-defined ranges available outside the popup with the dates but we'd prefer to have it part of the date selection itself.

Thanks!

R00118189 commented 5 years ago

Happy with successful resolution to #291 I started using v-calendar and hit same struggle yesterday. custom / predefined ranges and double pane would be awesome add-on.

booni3 commented 5 years ago

+1 on this!

booni3 commented 5 years ago

I have put together a real quick layout for this within a dropdown. Its built for bootstrap4 and uses moment.js for the date ranges. It may be useful as a starting point.

https://gist.github.com/booni3/5f7e069fd7f8847a6e98c77662871faa

It looks like this:

Screenshot 2019-06-02 at 18 26 18
booni3 commented 5 years ago

@nathanreyes - Is it possible to get panels to show non-consecutive months? I am using this.$refs.picker.adjustPageRange() as you suggested in #322, and that is working well. But if that date range spans over more than 2 months it would be great to be able to show the start and the end on separate panels.

kalnode commented 5 months ago

Sorry to be a gravedigger =P

IMHO, these kind of features (e.g. presets) should not be provided as part of the core library; they're one extra level of hand-holding that is perhaps too tight to any given use-case.

If you're building your app wisely, you'd have an abstraction layer wrapping v-calendar, where making presets (that satisfy your specific use-case) is a piece of cake.

Having said that, it would be nice to see a tutorial and/or sample of this... that should be the "ask" here.