Hello, thank you for making this awesome component. Thank you for the CDN version. I have some minor design suggestions:

1. The buttons (change-month-button and action-buttons) could have cursor: pointer; style.
2. The date buttons could have :hover color
3. The change-month-buttons could have :focused colors
4. The day.in-range buttons could have normal font-weight, not bold
5. The selected days buttons borders could have #33dacd color
6. The hidden months affect the height of the datepicker, and sometimes there is unnecessary empty space at the bottom.

I know 5 of these are easy to fix/change and people can change them in the CSS styles, but i wanted to give these suggestions to make it more similar to the original component.

Thank you for making this component.

I have two datepicker, one in the modal window, and one outside it. Trigger-element-id are different. When I show modal, datepicker not trigger on my input :(

I use bootstrap-vue, and component bModal

Hello,

First, thank you. This datepicker is one of the best that I found 😄

I was wondering if it was possible to implement a kind of Month selection and year selection when clicking on the year.

Thanks by advance for your answer

Matthieu

"vue-airbnb-style-datepicker": "^1.9.0" "vuetify": "^1.2.5"

The error is not that easy to understand since it happens everywhere even if it doesn't even have a vue-airbnb-style-datepicker, so I t hink this is a global listener which should not be the case.

But the error I get is the following:

Uncaught TypeError: vnode.context[binding.expression] is not a function
    at HTMLBodyElement.el.event (vue-airbnb-style-datepicker.es.js:697)

The stack trace: el.event @ vue-airbnb-style-datepicker.es.js:697

This causes the vuetify component not to be able to close when clicking outside it's span area. The affected component works properly once vue-airbnb-style-datepicker plugin is disabled so it is a problem with this event handling.

Edit: I've tracked the issue down, and its due to de click outside directive which is being handled globally instead of being contained in the component scope, this is affecting all other elements like comboboxes, dropdown menus, preventing them from closing in

Implements #40 and also fixes 2 accessibility bugs on ie11/edge/mobile devices

• creates resize-select directive, which is used to ensure that the month/year select dropdowns are the correct width (usually, select dropdowns default to being as wide as their widest option, this directive makes them as wide as the currently selected option)
• adds showMonthYearSelect and yearsForSelect props

bugfixes

• fixes accessibility keyboard trap logic in ie11 (Object.values is not supported in ie11)
• adds a timeout to setFocusedDate in order to fix focus logic across devices (before, focus was being applied inconsistently on mobile as well as ie11/edge)

Currently there is a trigger property that can be used to show the datepicker.

I want to hide the datepicker when the user selects a second date. I've tried to change this trigger inside a @date-two-selected event handler, but when change the value of the trigger property everything goes erratic, and does not work.

I'm not sure what is the best way to resolve this, maybe add a prop to control the displaying status from the outside, or an event listener for the datepicker to react to.

Hello, would you be open to a PR that adds accessibility support to this component? This would involve adding aria- tags to the various elements to enhance screen reader support, as well as enabling keyboard navigation of the component. I would be happy to follow the exact accessibility patterns that are being used inside the airbnb react date picker to maintain consistency between the two components. My team at work would like to use this component in an upcoming project, so I would have paid time to do work on this in the next couple weeks.

The only issue I see with doing that is this component currently uses left/right arrow for changing months, whereas airbnb uses left/right for picking dates and pgup/pgdn to switch months. These are the keys that the airbnb date picker is currently using for keyboard navigation (found inside the ? icon in the bottom right corner of their component http://airbnb.io/react-dates/)

↵ Select the date in focus.
←/→ Move backward (left) and forward (right) by one day.
↑/↓ Move backward (up) and forward (down) by one week.
PGUP/PGDN Switch months.
HOME/END Go to the first or last day of a week.
ESC Return to the date input field.
? Open this panel.

Firstly, thanks for creating this. It's working like a charm for me mostly.

Came across this unexpected behaviour where the default shown month in the calendar is non-ideal.

To reproduce:

1. Set a min-date that is dynamic
2. Update this min-date to a future month (ie, from a related datepicker)
3. Trigger the calendar.

It will show the initial min-date's calendar month which consists of non-selectable dates.

Expected behaviour: go to the month where the min-date falls by default.

Bonus: add an option to set the default month to show when calendar is triggered. I believe this property is called "initialVisibleMonth" in the Airbnb version.

Hi,

how can i clear the dates? tried to add a function on the click cancel button but no event is emitted on the click button. any recommedation on how to implement this clear dates functionality?

Having this error while use with Nuxt.js

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing . Bailing hydration and performing full client-side render.

Hi Mikael,

first of all thanks for sharing your datepicker, I found it very neat and easy to use. I'd like to suggest a new feature: be able to "Cancel" a date selection, or in other words, require to explicitly press the "Apply" button before the dates are changed.

In my PR you can see that I still propagate the date changes while the user is selecting the date range, but if the user presses Cancel, or clicks outside the date selector, the changes are reverted. Otherwise, if the user presses "Apply" the new dates are kept as selected. Also, I've added an explicit event to let the parent app know when dates have been applied following a click on "Apply" button.

To avoid introducing behaviour changes I've wrapped this new feature within a new property "require-apply" set to False by default.

Thanks again for sharing this,

Luca

I have set :date-one="dateOne" and when I open datepicker, the first date is selected but when I click any other date to select the second date, it disselects the already selected first date and considers newly selected as first date.

If I pass an empty array to the enabledDates prop, the expected behavior would be that all dates are disabled. Yet, an empty array doesn't disable any dates.

isDateDisabled(date) {
  if (this.enabledDates.length > 0) {
    return this.enabledDates.indexOf(date) === -1
  } else {
    return this.disabledDates.indexOf(date) > -1
  }
}

The functionality of the above method needs to be reconsidered.

date-fns v2 is out! so update AirbnbStyleDatepicker.vue component. Please! rewrite imports like example: import { format, formatDistance, formatRelative, subDays } from 'date-fns'

If you have :months-to-show="1" a couple of different bugs occur, when changing months with the keyboard arrows, depending upon which browser you are using.

In Safari, the calendar will get stuck between animations. In Chrome, the animation works fine, however, the next month's date will not be selected and you will have to click with the mouse in the new month in order to begin using the keyboard again.

The issue appears to be occurring within the setFocusedDate method, as there is a 10ms setTimeout to focus the next date, according to the comments this is an ie11 "hack." I believe, the reason it is getting stuck is that it is trying to select the next date, however, the animation transition is 300ms. So it is trying to select the next date (10ms) before the animation is finished (300ms).

Locally I have managed to hack something together to get this working, I am more than happy to push up a PR, however, it looks like there has been no activity in this repo almost 1 year.

@MikaelEdebro can you let me know if you are still actively maintaining this and if you would like for me to submit this PR?

There are event triggers when month changes to previous or next but they are not being triggered when a month is selected from the picker. I'm hoping that there will be also for the year.