Using in vue web component

[tiborAntalInterway]

Hi, i want to use datepicker in vue web component (https://github.com/vuejs/vue-web-component-wrapper) but there are some problems.

• keyboard navigation is not working correctly, if i want change date with keyboard, keypress.left it does nothing, keypress.down and keypress.right change month (not day) to next, keypress.up change month to prev (i expect, that keyboard navigation changing days)
• i cant display the calendar on click, it will open for a second and then will be closed (i think that will be related with shadow-dom), if I show calendar on focus, working correctly
• validation if I type manually not working, if I type date that is disabled, it must remove it or select closest available

thank you

[mst101]

Hi, thanks for reporting. I'm not very familiar with web components, so if you're able to provide a repo, that would help me to look into this further.

[yashha]

@tiborAntalInterway Did you find a solution, I'm also struggling with the same problem

[tiborAntalInterway]

Hi @mst101, repo is here - https://github.com/tiborAntalInterway/datepicker

[mst101]

Hi both, since not all my updates have yet been merged to the @sum.cumo repo, I imported my latest vue-datepicker code into your web-components repo and this solves the problem of the datepicker immediately closing. See https://github.com/mst101/vue-datepicker-tibor.

As you can see from my 2nd commit (e.g. open the first datepicker, arrow down a couple of times to today's date, then arrow right to try to get to the next date), the arrow keys are failing because the handleArrow method in pickerMixin expects document.activeElement to be the button element that is currently focused (i.e. today's date)... when in fact it is the web-datepicker element that is focused.

I'm not immediately sure how to overcome this. Any ideas?

[tiborAntalInterway]

I think you can use this - https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/activeElement I used this and it work fine

`handleArrow({ delta }) { let shadowDom = document.activeElement let shadow = shadowDom.shadowRoot let focusedElem = shadow.activeElement

  const stepsRemaining = Math.abs(delta)
  const options = {
    currentElement: focusedElem,
    delta,
    stepsRemaining,
  }
  console.log("shadow dom active element: ", focusedElem)
  console.log("We're expecting `document.activeElement` to be the currently focused date cell " +
      "(i.e. a button element), but it is actuallyyyy: ", document.activeElement)

  this.setFocusToAvailableCell(options)
}`

So you must to check, if activeElement is in shadow dom and if its, you can find it :) it looks like it works

[mst101]

Great stuff! I'd never heard of ShadowRoot...

I've updated the code at https://github.com/mst101/vue-datepicker-tibor - and your example is working now.

I also spotted a bug which caused the calendar to mistakenly re-open immediately after selecting a date when both typeable and show-calendar-on-focus are true - so I fixed that too.

N.B. I noticed you were using a 'd.M.yyyy' format on a typeable calendar... As mentioned in the docs, the inbuilt parser is a bit ropey, hence the switch between e.g. 10.8.2022 and 8.10.2022 on blurring the input field! You're better off using the parser provided by date-fns as described in the docs and as per my last commit in the repo above.

@MrWook - I've submitted a couple of PRs to the @sum.cumo repo. You seem to be busy, but grateful if you could have a look when you can.

[tiborAntalInterway]

thank you!

thanks also for solution for date formatting

[tiborAntalInterway]

Hi @mst101 can you help me with this? By default is set dateFrom and dateTo, but the dateTo is not showing in input (but its selected on today with new Date())

happening also at https://github.com/mst101/vue-datepicker-tibor

[mst101]

Yes - funnily enough, that turns out to be the same issue as raised in #189 a couple of hours ago. It will be fixed once PR #190 is merged.

I've updated https://github.com/mst101/vue-datepicker-tibor, so you can see it's working there...