vuejs-datepickerで指定の日付を強調表示する

2019年5月23日

はじめに

 

vuejs-datepicker指定の日付を強調表示する方法です。

 

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

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

 

環境

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

 

導入手順

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

<vuejs-datepicker :highlighted="highlighted"></vuejs-datepicker>

[手順2] - highlighted用のプロパティを用意する

プロパティに強調する日付を設定します。

new Vue({
  el: '#app',
  components: {
    vuejsDatepicker
  },
  data: {
    highlighted: {
        to: new Date(2018, 0, 5), 
        from: new Date(2018, 0, 26), 
        days: [6, 0], 
        daysOfMonth: [15, 20, 31], 
        dates: [ 
          new Date(2018, 9, 16),
          new Date(2018, 9, 17),
          new Date(2018, 9, 18)
       ],
       customPredictor: function(date) {
         if(date.getDate() % 4 == 0){
           return true
         }
       },
       includeDisabled: true
    }
  },
});

 

サンプル

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

 

プロパティ

type  説明
to string 特定の日付までのすべての日付を強調表示
from string 特定の日付以降のすべての日付を強調表示
days array 指定曜日を強調する 例 月曜日(1)
[0,1,2,3,4,5,6]
daysOfMonth array  毎月の指定日付を強調
dates array 指定の日付を強調
customPredictor function 関数で指定した日付を強調する
includeDisabled bool 無効日を強調表示する

 

まとめ

vuejs-datepickerで指定した日付を強調表示する方法を記事にしました。

これを利用して土日を強調表示するという記事も書きましたので、興味がありましたらこちらもどぞー

vuejs-datepickerで土日を強調表示する

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

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

-vue.js
-, ,