search

MikaelEdebro / vue-airbnb-style-datepicker

A VueJs datepicker with a similar look and functionality as the popular AirBnb datepicker.
https://mikaeledebro.gitbooks.io/vue-airbnb-style-datepicker/
MIT License
505 stars 105 forks source link

There isn't a way to clear the date #45

Open daamsie opened 5 years ago

daamsie commented 5 years ago

With the original airbnb datepicker there is an option to "showClearDate" which adds an X into the input when a date has been selected. Clicking on the X will reset the date to null.

bigsee commented 5 years ago

It would actually be great to use the existing links in the picker to get closer to the Airbnb datepicker's behaviour:

airbnb clear date behaviour

I have renamed cancel to 'clear' as per the docs, but the closeDatepickerCancel() method closes the datepicker automatically.

Perhaps we could add a simple Boolean prop to check whether or not the user wants the date picker to close in the cancel method? I'd be happy to tweak and make a PR... :)

Either way, thanks again for the great work! 👍🏽😀

daamsie commented 5 years ago

You're talking about something else.

This shows the clear dates functionality I'm referring to:

clear

Reference here

bigsee commented 5 years ago

@daamsie ah, I see. thank you for pointing that out. I didn't realise this storybook existed as I'd been comparing the functionality in the live product. I've searched the react-dates library but can't see the current live pattern for clearing dates.

@MikaelEdebro is the plan to build out patterns and functionality from the react-dates library, from the datepicker currently served in the live product or some combination? Should I raise a separate issue or perhaps shelve my feedback altogether?

MikaelEdebro commented 5 years ago

@daamsie About adding a 'X', you could totally do that yourself. Since this datepicker doesn't dictate how the trigger element looks like. Just add a button with a method that clears your dates (your data models).

MikaelEdebro commented 5 years ago

@bigsee Unfortunately I don't think it will be possible to mirror all the functionality of react-dates. I originally just built this to have something similar as the datepicker behaviour that is on airbnb.com. I also want to keep this light-weight. So in my opinion I think it's preferable to have a light footprint than adding a bunch of features (that might only be used by a few users).

MikaelEdebro commented 5 years ago

Seems like airbnb.com have changed the behaviour on their site. I'm pretty sure that previously the logic was similar to what is in vue-airbnb-style-datepicker:

  1. Select date > Apply
  2. Change date
  3. Click "Cancel"
  4. Date reverts to first date you selected

Because we implemented this feature especially for this. But now they only have "Clear", which always clears the dates. Not sure how to handle this. On one side, I don't want to break existing functionality, but it seems like it would be more reasonable to always show "Clear" and just clear dates.

bigsee commented 5 years ago

@MikaelEdebro totally understand the dilemma. it also might be a dangerous game trying to keep up with the pace of change in Airbnb's UI element development anyway. Agree with you, though, that the clear pattern seems like better UX (which is presumably why they made this change). Odd that the react-dates storybook wasn't updated to reflect though.

I've currently just repurposed the 'cancel' button to do a similar thing...

screen shot 2018-08-17 at 14 48 11

...so perhaps that's enough for people for now, and then see how much traction this issue gains?

daamsie commented 5 years ago

Hmm, I'd kind of prefer that the X was part of the component, but fair enough as I also appreciate efforts to keep it as lightweight as possible :)