Component showing incorrectly

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

506 stars 105 forks source link

Component showing incorrectly #65

Closed josh345ag closed 5 years ago

josh345ag commented 6 years ago

The component is showing incorrectly.

MikaelEdebro commented 6 years ago

What browser are you using? Are you using some CSS lib that might be conflicting with the CSS?

JohnyProkie commented 5 years ago

Hi, I have the very same problem. Looks like changing .asd__wrapper{ text-align: center; } to .asd__wrapper{ text-align: right; } fix the issue

MikaelEdebro commented 5 years ago

Could you share some link where this is reproduced? Most likely, there is some CSS interfering with the component.

JohnyProkie commented 5 years ago

I'm sorry, it's my private project on private repo. Also I did not manage to isolate the problem, I only know I've experienced this and after setting change I've posted, it did not show up again.

mzotter commented 5 years ago

HI, I've the same problem. When I open the datepicker, everything works as it should be. But when I click previousMonth 2 times, component shows incorrectly. => it happens when the initial DateOne or the empty new Date (to set focusedDate) is on the last asd_month, the hidden one.

Step 1 - shown correctly: bildschirmfoto 2018-12-17 um 14 51 41

Step 2 - after first click on previousMonth: bildschirmfoto 2018-12-17 um 14 51 51

Step 3 - after second click on previousMonth: (the whole asd_month with selected DateOne should be the last asd_month (hidden)) bildschirmfoto 2018-12-17 um 14 51 32

After that I also get following Error in the Dev Tools console from Chrome: bildschirmfoto 2018-12-17 um 15 03 30

bildschirmfoto 2018-12-17 um 15 05 02

It can be reproduced on ur Demo site: first DatePicker http://htmlpreview.github.io/?https://github.com/MikaelEdebro/vue-airbnb-style-datepicker/blob/master/docs/examples.html

jeryj commented 5 years ago

I encountered this issue in my app, and it was related to another library adding its own .hidden { display: none; } CSS.

I took a look at the source, and here's my guess at what's going on:

/src/components/AirbnbStyleDatepicker.vue on line 57 is using :class="{hidden: monthIndex === 0 || monthIndex > showMonths}". It looks like the CSS was updated to BEM though, and this hidden class was missed. I think the datepicker is wanting asd__month--hidden instead of hidden, like:

:class="{asd__month--hidden: monthIndex === 0 || monthIndex > showMonths}"

MikaelEdebro commented 5 years ago

Hopefully this is fixed in v 2.5.0. Thanks @jeryj for pointing out the missed class.