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

2019年5月22日

はじめに

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

 

この記事はvuejs-datepicker土曜日、日曜日を強調表示する方法をまとめた記事です。

 

強調表示についてのまとめた記事も書きましたので、こちらもどぞー

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

 

環境

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

 

導入手順

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

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

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

プロパティのdaysで曜日を設定します。

new Vue({
  el: '#app',
  components: {
    'vuejs-datepicker':vuejsDatepicker
  },
  data: {
    highlighted: {
      days: [6, 0], // 曜日を設定
    }
  },
});

 

サンプル

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

 

まとめ

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

他にも指定した日付や指定した期間を強調することができます。
それはまた別の記事にて・・・

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

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

-vue.js
-, , ,