vue.js

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

2019年5月20日

はじめに

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" v-model="selectFerryDay"></vuejs-datepicker>

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

new Vue({
  el: '#app',
  components: {
    'vuejs-datepicker':vuejsDatepicker
  },
  data: {
    disabledDates: {
      to: new Date(2020, 4, 11),
      dates:[
        new Date(2020, 4, 17),
        new Date(2020, 4, 24),
        new Date(2020, 4, 31),
      ]
    },
    selectFerryDay: new Date(2020, 4, 12),
  },
});

 

サンプル

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

 

まとめ

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

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

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

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

-vue.js
-, ,