はじめに

vuejs-datepickerで日付の期間を制限する方法

 

vuejs-datepicker日付の選択できる期間を制限する方法が判ったので記事にします。

 

vuejs-datepickerの基本的な使い方は以下を参考にしてください。

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

 

環境

  • vue.js: 2.5.17
  • vuejs-datepicker: 1.5.4

 

導入手順

[手順1] – テンプレートに:disabled-datesを設定

<vuejs-datepicker :disabled-dates="disabledDates"></vuejs-datepicker>

[手順2] – 範囲のto-fromを設定する

new Vue({
  el: '#app',
  components: {
    vuejsDatepicker
  },
  data: {
    disabledDates: {
      to: new Date(Date.UTC(2018, 9, 4)),
      from: new Date(Date.UTC(2018, 10, 4)),
    }
  },
});

 

サンプル

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

 

まとめ

今回の記事は静的な選択範囲を指定する方法です。

開始日付から1ヶ月間とかの設定方法は、また何かの機会に・・・

 

今日はこの辺でー

 

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください