vuejs-datepickerを外部ボタンから起動する方法

はじめに

ページツアーを作ることになったのですが、ツアーでフォーカスされた時にvuejs-datepickerを起動する必要がでました。

Vue.jsのdatepickerは「vuejs-datepicker」がおすすめ!

 

通常であれば、テキストフィールドをクリックすれば起動することが可能です。

しかし今回はツアーなので、クリックすることなくvuejs-datepicker展開してほしいのです。

 

環境

vue.js 2.6.10
vuejs-datepicker 1.6.2

 

外部からvuejs-datepickerを起動する

今回は分かりやすくボタンをクリックしてvuejs-datepickerを起動します。

HTML

<div id="app">
  <vuejs-datepicker ref="picker"></vuejs-datepicker>
  <button @click="doOpen()">open</button>
</div>

スクリプト

this.$refs.picker.showCalendar() でvuejs-datepickerを起動します。

this.$refs.picker.close(true); でvuejs-datepickerを閉じます。

new Vue({
  el: '#app',
  components: {
    'vuejs-datepicker':vuejsDatepicker
  },
  methods:{
    doOpen: function(){
      if(!this.$refs.picker.isOpen) {
        this.$refs.picker.$el.querySelector("input").focus();
        this.$refs.picker.showCalendar();
      }
    },
    doClose: function(){
      if(this.$refs.picker.isOpen) {
        this.$refs.picker.close(true);
      }
    }
  }
});

>>専用ページで確認する

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js, ライブラリ
-