search

mathieustan / vue-datepicker

A clean datepicker made with VueJs
https://vue-datepicker.netlify.com/
MIT License
165 stars 47 forks source link

Amazing datepicker, just a few additions needed #4

Closed kfirba closed 3 years ago

kfirba commented 5 years ago

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: image

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 commented 5 years ago

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 commented 5 years ago

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

kfirba commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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 commented 4 years ago

@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 commented 4 years ago

Hello @kfirba,

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

mathieustan commented 4 years ago

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

v0.2.3-rc.1

gigerIT commented 4 years ago

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

mathieustan commented 4 years ago

@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 commented 3 years ago

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