Add a way to programmatically open and close the modal

[zhegwood]

Versions

• vue: 2.6.11
• vue-datetime: 1.0.0-beta.14
• luxon: 1.25.0

Description:

There is no documented way to programmatically open and close the picker modal. One would expect this.$refs.datepicker.open() or this.$refs.datepicker.close(). If there is a way to do this right now, it is not in the docs.

Steps To Reproduce:

https://jsfiddle.net/6nwjyorp/

[darrenklein]

@zhegwood One way to achieve this is by adding a ref to the Datetime component and then setting the isOpen property of the ref to true. I wanted to open the picker when the user clicked on a calendar icon adjacent to the input, so here's how I did it:

<template>
  <div class="datetime-input-container">
    <img
      @click="openDatetime"
      src="/icons/calendar.svg" />
    <Datetime
      ref="datetime"
      v-model="myModel.datetime"
      type="datetime"
      placeholder="Select datetime"
    />
  </div>
</template>

<script>
import { Datetime } from "vue-datetime";
import "vue-datetime/dist/vue-datetime.css";

export default {
  name: "Form",
  components: {
    Datetime
  },
  methods: {
    openDatetime() {
      this.$refs.datetime.isOpen = true;
    }
  }
}
</script>

(I've abstracted this from a more complex component, so forgive me if I left something out - but I think you'll get the idea).