Amazing datepicker, just a few additions needed

[kfirba]

Hello @mathieustan!

You've done an excellent job building this datepicker. I'd love to suggest a few additional features which would make it even better!

RTL Support - DONE (#5)

RTL support is actually almost "native" since you've built the datepicker using flexbox. There are only few adjustments needed to make it fully compatible. You can simply add direction: rtl to the HTML element to see what I mean.

Example:

Two (2) Months in View - Desktop

It is really convenient to have 2 months in view when choosing a range of dates, e.g. hotel or flight bookings. For example (Desktop): https://www.google.com/travel/hotels

Mobile Vertical Scrolling Months

On mobile, it would be great to have the ability to scroll up and down to change the current month in view in the datepicker. A great example of that would also be Google's datepicker: https://www.google.com/travel/hotels. It doesn't even have to take the full height of the screen like in the example, but just be scrollable in the same format it is now.

Touch Gestures

If you don't want to implement the mobile vertical scrolling months, having simple touch gestures such as swiping left and right to change months would be a good enough compromise.

Hover Tooltip on Range Picker (mainly desktop)

When hovering over dates in range mode, showing the number of nights or days (configurable option, or even allow a custom callback) would be great feedback for users. This is very useful when picking dates for a flight (days) or a hotel (nights) search. For example https://wakirin.github.io/Lightpick/

I'll try to submit a PR with the RTL fixes.

Thanks again for the fantastic datepicker!

[mathieustan]

Hello @kfirba,

Thanks for your feedback, It's always good to hear.
Yes, these features were indeed planned in the near future.

I'll look at your RTL fixes. Thx

[mathieustan]

🚀 rtl is now in production. v0.1.8-rc.7

[kfirba]

@mathieustan Thanks!

Also, there is one thing we missed: the datepicker open animation. Even in RTL mode, it seems like the transition origin for the datepicker (DatePickerAgenda) is `top left` which makes it look really weird on RTL websites.

I've tried to hunt down and see where it is defined and eventually found it in the [getElementPosition](https://github.com/mathieustan/vue-datepicker/blob/master/src/utils/positions.js#L115) method.

It seems like you are calculating where the datepicker should open from based on its location in the viewport and the remaining space. I think we need to also somehow let it be aware of the document's direction. Basically, if we knew we are in RTL mode within this function, we could fix the positioning to top right instead.

Do you think it's an easy fix? The only temporary solution I can think of as of now is to override the transition origin via CSS with !important rule, but that will also override the logic that checks to see if there is actually space for the datepicker to open

Seems like there are many more RTL fixes that I didn't notice (since I haven't played with every state of the datepicker. I'll be submitting a PR soon. See #9.

[kfirba]

@mathieustan Hey mat!

I was wondering if there is some roadmap for the project? Would love to see the features mentioned in this issue get developed. Would make this datepicker the best one I've ever used :)

[mathieustan]

Hello @kfirba,

I have a lot of work those days. I’ll try to implement those features when I’ll have some times. I’ll do my best.

[kfirba]

@mathieustan Hey mat!

We've been using the datepicker for a while now and it is just awesome!

Is there any ETA for the features mentioned in this issue? Is there any way I can help with this?

[mathieustan]

Hello @kfirba,

I ll add swipe left/right for month today ;)
I’ll try to work on a roadmap to improve this component 👌

[mathieustan]

@kfirba Can you try new version, and let me know if swipe is correct in RTL mode :)

v0.2.3-rc.1

[gigerIT]

+1 on the Two (2) Months in View feature
It would be pretty neat.

[mathieustan]

@gigerIT yep.
I have a lot of work those days, so it's hard for me to add new features like this.
I'll have more time later in year, and I'll implement this.

[mathieustan]

I'll close this issue for the moment.
More fixtures will come soon