charliekassel / vuejs-datepicker

A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations
MIT License
2.61k stars 730 forks source link

For anyone interested, in previous versions it did act the way you want it to, you can see in a [thing I made](https://shifter.surge.sh) ([repo](https://github.com/braden337/shifter/blob/master/src/index.html)) which uses `"vuejs-datepicker": "^0.9.29"`. #844

Closed Schimmelreiter2019 closed 3 years ago

Schimmelreiter2019 commented 3 years ago

For anyone interested, in previous versions it did act the way you want it to, you can see in a thing I made (repo) which uses "vuejs-datepicker": "^0.9.29".

Today I've been working on a new thing and installed the latest version 1.5.2 and was wondering why I kept seeing the keyboard pop up.

So for now, to make it work like the way it used to, when the component is mounted I set the readonly attribute to true on the input element. I also made a method called blur, and attached that to the closed event, so that the keyboard 'done' bar (on iOS, I'm not sure how it would look on Android) clears after you pick a date or click away.

<template
  <datepicker @closed="blur"></datepicker>
</template>

<script>
module.exports = {
  mounted() {
    document
      .querySelectorAll(".vdp-datepicker input")
      .forEach(e => (e.readOnly = true));
  },
  methods: {
    blur() {
      document.querySelector(":focus").blur();
    }
  }
}
</script>

Originally posted by @braden337 in https://github.com/charliekassel/vuejs-datepicker/issues/497#issuecomment-410523010